《CSS揭秘》总结二:css常用样式实现
裁缝效果
实现思路:使用outline属性,将定义的虚线outline,通过outline-offset往内偏移
<div class="parent">
裁缝
</div>
.parent {
background: #324057;
width: 400px;
height: 200px;
line-height: 200px;
text-align: center;
color: white;
font-size: 2rem;
margin: 100px;
border-radius: 20px;
outline: 2px dashed currentColor;
outline-offset: -20px;
}
outline的特点:
- 不贴合border-radio,始终保持直角(被认为是bug,可能未来会修改成贴合)
- 多边框场景不适用
外直内弯
实现思路:使用outline搭配box-shadow
<div class="normal parent2">
外直里弯
</div>
.parent2 {
border-radius: 20px;
background: #ff9b00;
outline: 20px solid ;
box-shadow: 0 0 0 20px red;
}
最外层是outline,红色的是box-showdow;只要把boxshowdow改成跟outline一样的颜色就可以了。
至于box-show的宽度多少最合适呢?这个是可以通过勾股定理算出来的。
也就是(r根号2)的宽度
斜条纹背景
知识点:background:linear-gradient(direction, color…);
横竖条纹都非常简单:
.parent3 {
background: linear-gradient(to right,cornflowerblue 50%,orange 0);
background-size: 30px 100%;
}
思路:首先定义了一般是蓝,一半是橙;但是size确定义了30px;也就是15px蓝,15px橙;再加上默认的repeat;那么就形成了重复条纹了。
斜条纹(有点麻烦):
background: linear-gradient(45deg,orange 25%, cornflowerblue 25%, cornflowerblue 50%,orange 50%,orange 75%, cornflowerblue 75%,cornflowerblue 0);
background-size: 60px 60px;
如果没有repeat,他长得样子就像下面这样,由4个条纹组成。
原理:好像铺地砖一样,这样的条纹板砖拼到一起就是一个连贯条纹的效果。
但是这种方式非常蛋疼,应为你稍微改动下角度的话,这个效果就被破坏了。怎么办?难道又专门为了一个角度去计算这一个小格子的样式吗?显然很麻烦。
接下来用到一个威猛的线性效果,repeat-linear-gradient;是的前面多了个repeat这个单词;
.parent5 {
background: repeating-linear-gradient(45deg, orange , orange 15px ,cornflowerblue 15px, cornflowerblue 30px);
}
上面代码的意思是:0-15px是橙,15-30px是蓝;你看到好像多余的颜色设置是为了清除渐变过渡效果。