简单了解css3轮廓outline
简单了解css3轮廓outline
Daotin
发布于 2019-08-14 10:31:06
发布于 2019-08-14 10:31:06
outline属性是用来设置一个或多个单独的轮廓属性的简写属性 ， 例如 。
轮廓有下面几个属性：
{
outline-style: solid;
outline-width: 10px;
outline-color: red;
}他们有一种简写形式：
{
outline: 10px solid red;
}轮廓的特点：
轮廓不占据空间，它们被描绘于内容之上。
可以做到下图的效果：
当然我们可以做更好玩的东西，比如一个“+”号：
具体css如下：
div {
margin: 100px;
width: 100px;
height: 100px;
outline: 15px solid #000;
outline-offset: -66px;
border: 2px solid #000;
background: yellow;
}outline-offset: -66px; 是关键，它表示轮廓距div边的距离，如果为负值则会往里面收缩，最后形成一个加号。
需要注意的是：
- 容器得是个正方形
- outline 边框本身的宽度不能太小
本文参与?腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2019-08-13 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
相关产品与服务
容器服务
腾讯云容器服务（Tencent Kubernetes Engine, TKE）基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务，覆盖 Serverless、边缘计算、分布式云等多种业务部署场景，业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者，主导开源项目Crane，全面助力客户实现资源优化、成本控制。