css揭秘读书笔记(一)
- 带箭头的提示框
- 透明边框
- 多重边框
- 背景图片灵活定位
- 缝边效果
- 边框内圆角
-
带箭头的提示框
- tips: 利用伪元素和继承
html
<div class="box">你好,css</div>
css
.box {
width: 200px;
padding: 20px;
margin-top: 20px;
position: relative;
border: 1px solid #e4e4e4;
background: #f5f5f5;
}
.box:after {
content: '';
position: absolute;
width: 12px;
height: 12px;
top: -7px;
left: 20px;
border: inherit;
background: inherit;
border-right: 0;
border-bottom: 0;
transform: rotate(45deg);
}
-
透明边框
- tips: 如果不用background-clip则边框会被覆盖,因为background-clip默认值为border-box,即将背景裁剪到边框,将值设为padding-box即可将背景裁剪到内边距框
html
<div class="box">你好,css</div>
css
body {
background: #F5E434;
}
.box {
width: 200px;
padding: 20px;
margin-top: 20px;
background: #fff;
border: 10px solid hsla(0, 0%, 100%, .5);/*透明边框*/
background-clip: padding-box;
}
-
多重边框
- tips: 利用box-shadow,将偏移值和模糊距离都设为0,阴影的尺寸即为边框的宽度,因为box-shadow可以添加多个阴影,因此可以实现多重边框
html
<div class="box">你好,css</div>
css
.box {
width: 200px;
padding: 20px;
margin: 40px;
background: yellowgreen;
box-shadow: 0 0 0 10px #655,
0 0 0 20px deeppink;
}
-
背景图片灵活定位
- tips: 利用background-origin改变背景图片的定位位置,默认根据内边框定位
html
<div class="box">你好,css你好,css你好,css你好,css你好,css</div>
css
.box {
width: 200px;
padding: 20px;
background: url(images/square.png) no-repeat;
border: 1px solid #e4e4e4;
background-origin: content-box;
/*还可以改成background-position: left 20px top 20px;*/
}
-
缝边效果
- tips: 利用outline-offset将描边移至元素内,但是outline不能实现圆角
html
<div class="box">你好,css</div>
css
.box {
width: 200px;
padding: 20px;
background: yellowgreen;
border-radius: 5px;
outline: 1px dashed #fff;
outline-offset: -10px;
}
-
边框内圆角
- tips: 利用box-shadow和outline,box-shadow可以实现圆角,outline在box-shadow的上层
html
<div class="box">你好,css</div>
css
.box {
width: 200px;
padding: 20px;
margin: 40px;
background: tan;
border-radius: 10px;
box-shadow: 0 0 0 4px deeppink;
outline: 10px solid #655;
}
将box-shadow的颜色值设为#655并设置阴影尺寸合理值即可以“填满空隙”,关于阴影尺寸的设置:必须大于
(2√−1)r
,其中
r
<script type="math/tex" id="MathJax-Element-2">r</script> 为圆角半径。