直接上例子了。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21
| div{ width:50px; height:50px; border-radius:50%; border: 5px solid #333; position: relative; } div::after{ content: '', display:block; width:8px; height:60px; border-radius: 5px; background: #333; position: absolute; right: -22; top: 38; transform: rotate(-45deg); }
|
attr和content实现悬浮提示
attr:能够在css中获取到元素的某个属性值,然后插入到伪元素的content中去。
html代码如下
1 2
| <div data-title="hello, world">hello...</div>
|
下面看看如何实现悬浮提示
1 2 3 4 5 6 7 8 9 10 11 12 13
| div { position: relative; } div:hover::after { content: attr(data-title); //取到data-title属性的值 display: inline-block; padding: 10px 14px; border: 1px solid #ddd; border-radius: 5px; position: absolute; top: -50px; left: -30px; }
|
box-sizing
在标准盒子模型中,元素的总宽=content + padding + border + margin。
box-sizing属性就是用来重定义这个计算方式的,它有三个取值,分别是:content-box(默认)、border-box、padding-box
一般来说,假如我们需要有一个占宽200px、padding10px、border5px的div,经过计算,要这么定义样式。
1 2 3 4 5 6 7 8
| div { width: 170px; height: 50px; padding: 10px; border: 5px solid red; }
|
如果使用box-sizing
1 2 3 4 5 6 7 8 9
| div { box-sizing: border-box; width: 200px; height: 50px; padding: 10px; border: 5px solid red; }
|
做活动页面的时候我们经常会遇到这样的需求:
顶部的中间一张大banner图片,然后整个区域的背景色要根据图片背景色渐变。就可以使用这个属性了。
1 2 3 4 5 6
| div { width: 200px; height: 50px; background: linear-gradient(to right, red, yellow, black, green); }
|
还有repeating-linear-gradient也可以试试效果
radial-gradient 经向渐变
box-shadow 阴影效果
box-shadow: [x偏移] [y偏移] [阴影模糊宽度] [阴影宽度] [颜色],并且还能添加多个阴影,使用逗号隔开。
上一篇:js作用域
下一篇:pomelo并非完全的游戏引擎