css3的一些新用法

CSS
  1. ::after实现画图
  2. attr和content实现悬浮提示
  3. box-sizing
  4. linear-gradient 线性渐变
  5. radial-gradient 经向渐变
  6. box-shadow 阴影效果

直接上例子了。

  • ::after实现画图

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 {
/*这里的宽度要使用200-10*2-5*2 = 170得到。*/
    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;
}

  • linear-gradient 线性渐变

做活动页面的时候我们经常会遇到这样的需求：

顶部的中间一张大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偏移] [阴影模糊宽度] [阴影宽度] [颜色]，并且还能添加多个阴影，使用逗号隔开。

当前网速较慢或者你使用的浏览器不支持博客特定功能，请尝试刷新或换用Chrome、Firefox等现代浏览器