CSS3初体验之奇技淫巧
2016-07-31 08:46
573 查看
#border-radius、::after、attr和content、box-sizing、linear-gradient、radial-gradient、box-shadow
border-radius
相信这个属性,写过css的同学都知道,用来产生圆角,比如画一个圆形:
div {
width:100px;
height:100px;
background:red;
border-radius:100px; //border-radius:100%;
}
然后我们来看看它的语法:border-radius: [左上] [右上] [右下] [左下],于是我们来画一个半圆
div {
width: 100px;
height: 50px;
background: red;
border-radius: 50px 50px 0 0;
}
那如果要画一个椭圆该怎么办呢?你会发现上面的语法貌似做不到了,其实border-radius的值还有一种语法: x半径/y半径:
div {
width: 100px;
height: 50px;
background: red;
border-radius: 50px/25px;
}
如果我要画半个椭圆,又要咋办呢?
div {
width: 100px;
height: 50px;
background: red;
border-radius: 100% 0 0 100% /50%;
}
::after
这里拿个简单的例子来看,我们要画一个放大镜,如下图:
分析一下,这个放大镜可以由两个div组成,一个是黑色的圆环,一个是黑色把手(旋转45度)。所以我们就需要用两个div来实现吗?答案是NO,一个div也是可以的,我们可以借助::after来添加一个元素。同理如果需要三个div,我们还可以使用::before再添加一个元素。下面看一下代码:
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: -22px;
top: 38px;
transform: rotate(-45deg);
}
attr和content
比如我们要实现一个悬浮提示的功能。传统方法,使用title属性就能实现,但是现在我们要更美观,可以使用css3提供的attr:能够在css中获取到元素的某个属性值,然后插入到伪元素的content中去。
假如我们的html代码如下:
hello…
我们来看看实现这个插件的css代码:
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;
}
当hover的时候,在元素尾部添加一个内容为data-title属性值的元素,所以就实现了hover显示的效果,如下图所示:
box-sizing
我们知道,在标准盒子模型中,元素的总宽=content + padding + border + margin。 css中的盒子模型大家可能都知道,但是这个盒子模型的属性可能没有那么多人知道,box-sizing属性就是用来重定义这个计算方式的,它有三个取值,分别是:content-box(默认)、border-box、padding-box
一般来说,假如我们需要有一个占宽200px、padding10px、border5px的div,经过计算,要这么定义样式。
div {
width: 170px; //这里的宽度要使用200-10*2-5*2 = 170得到。
height: 50px;
padding: 10px;
border: 5px solid red;
}
然后我们来使用一下box-sizing属性。
div {
box-sizing: border-box;
width: 200px; //这里的宽度就是元素所占总宽度,不需要计算
height: 50px;
padding: 10px;
border: 5px solid red;
}
linear-gradient
做活动页面的时候我们经常会遇到这样的需求:
顶部的中间一张大banner图片,然后整个区域的背景色要根据图片背景色渐变。就可以使用这个属性了。
div {
width: 200px;
height: 50px;
background: linear-gradient(to right, red, yellow, black, green);
}
是不是很有趣?其实,linear-gradient还有更多有趣的功能,你可以根据下面的动图去感受一下:
你以为这就完了?等等,还有更强大的呢!repeating-linear-gradient,来感受一下:
linear-gradient还有更加强大的功能,比如它可以给元素添加多个渐变,从而达到更NB的效果。
radial-gradient
上面的linear-gradient是线性渐变,这个属性是径向渐变。下面的代码实现了一个chrome的logo。
div.chrome {
width: 180px;
height: 180px;
border-radius: 50%;
box-shadow: 0 0 4px #999, 0 0 2px #ddd inset;
background: radial-gradient(circle, #4FACF5 0, #2196F3 28%, transparent 28%),
radial-gradient(circle, #fff 33%, transparent 33%),
linear-gradient(-50deg, #FFEB3B 34%, transparent 34%),
linear-gradient(60deg, #4CAF50 33%, transparent 33%),
linear-gradient(180deg, #FF756B 0, #F44336 30%, transparent 30%),
linear-gradient(-120deg, #FFEB3B 40%, transparent 40%),
linear-gradient(-60deg, #FFEB3B 30%, transparent 30%),
linear-gradient(0deg, #4CAF50 45%, transparent 45%),
linear-gradient(60deg, #4CAF50 30%, transparent 30%),
linear-gradient(120deg, #F44336 50%, transparent 50%),
linear-gradient(180deg, #F44336 30%, transparent 30%);
}
实现原理就是使用了多个渐变色放在div上,友协被遮住,视觉上就产生了想要的效果,是不是很强大!看了下图你就知道其实就是在div上加了很多个渐变。
box-shadow
上面的例子大都是对css3新属性的了解和认识,这个实例则是有关于解决方案的例子。
需求:我们要实现下面这个效果图(三个边框:黑色,绿色,红色):
解法一:假如没有css3知识,我们可以做这样做:用三个div,分别设置边框,然后分别控制宽高和位置来达到这个效果。显然,很复杂,这里就不贴代码了。
解法二:现在我们有css3的知识了,借助box-shadow就可以轻松解决这个问题。先来看看它的语法:box-shadow: [x偏移] [y偏移] [阴影模糊宽度] [阴影宽度] [颜色],并且还能添加多个阴影,使用逗号隔开。当然你还可以继续增加,四重边框,五重边框……都不再是问题啦。另外,还能加圆角,阴影会贴紧内层div。
使用这种方法,有一个缺点就是,不支持虚线边框。
解法三: 使用outline(只能支持两重边框)使用这种方法的缺点就是,只能支持两层的边框,而且还不能根据容器的border-radius自动贴合。
总结
通过这段时间对css3的深入了解,发现css3真的很强大,研究起来还是挺有趣的,只有想不到,感觉没有做不到。不过为了实现很酷炫的效果,可能需要编写大量的css代码,这个时候使用什么技术就需要我们自己来衡量了。
border-radius
相信这个属性,写过css的同学都知道,用来产生圆角,比如画一个圆形:
div {
width:100px;
height:100px;
background:red;
border-radius:100px; //border-radius:100%;
}
然后我们来看看它的语法:border-radius: [左上] [右上] [右下] [左下],于是我们来画一个半圆
div {
width: 100px;
height: 50px;
background: red;
border-radius: 50px 50px 0 0;
}
那如果要画一个椭圆该怎么办呢?你会发现上面的语法貌似做不到了,其实border-radius的值还有一种语法: x半径/y半径:
div {
width: 100px;
height: 50px;
background: red;
border-radius: 50px/25px;
}
如果我要画半个椭圆,又要咋办呢?
div {
width: 100px;
height: 50px;
background: red;
border-radius: 100% 0 0 100% /50%;
}
::after
这里拿个简单的例子来看,我们要画一个放大镜,如下图:
分析一下,这个放大镜可以由两个div组成,一个是黑色的圆环,一个是黑色把手(旋转45度)。所以我们就需要用两个div来实现吗?答案是NO,一个div也是可以的,我们可以借助::after来添加一个元素。同理如果需要三个div,我们还可以使用::before再添加一个元素。下面看一下代码:
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: -22px;
top: 38px;
transform: rotate(-45deg);
}
attr和content
比如我们要实现一个悬浮提示的功能。传统方法,使用title属性就能实现,但是现在我们要更美观,可以使用css3提供的attr:能够在css中获取到元素的某个属性值,然后插入到伪元素的content中去。
假如我们的html代码如下:
hello…
我们来看看实现这个插件的css代码:
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;
}
当hover的时候,在元素尾部添加一个内容为data-title属性值的元素,所以就实现了hover显示的效果,如下图所示:
box-sizing
我们知道,在标准盒子模型中,元素的总宽=content + padding + border + margin。 css中的盒子模型大家可能都知道,但是这个盒子模型的属性可能没有那么多人知道,box-sizing属性就是用来重定义这个计算方式的,它有三个取值,分别是:content-box(默认)、border-box、padding-box
一般来说,假如我们需要有一个占宽200px、padding10px、border5px的div,经过计算,要这么定义样式。
div {
width: 170px; //这里的宽度要使用200-10*2-5*2 = 170得到。
height: 50px;
padding: 10px;
border: 5px solid red;
}
然后我们来使用一下box-sizing属性。
div {
box-sizing: border-box;
width: 200px; //这里的宽度就是元素所占总宽度,不需要计算
height: 50px;
padding: 10px;
border: 5px solid red;
}
linear-gradient
做活动页面的时候我们经常会遇到这样的需求:
顶部的中间一张大banner图片,然后整个区域的背景色要根据图片背景色渐变。就可以使用这个属性了。
div {
width: 200px;
height: 50px;
background: linear-gradient(to right, red, yellow, black, green);
}
是不是很有趣?其实,linear-gradient还有更多有趣的功能,你可以根据下面的动图去感受一下:
你以为这就完了?等等,还有更强大的呢!repeating-linear-gradient,来感受一下:
linear-gradient还有更加强大的功能,比如它可以给元素添加多个渐变,从而达到更NB的效果。
radial-gradient
上面的linear-gradient是线性渐变,这个属性是径向渐变。下面的代码实现了一个chrome的logo。
div.chrome {
width: 180px;
height: 180px;
border-radius: 50%;
box-shadow: 0 0 4px #999, 0 0 2px #ddd inset;
background: radial-gradient(circle, #4FACF5 0, #2196F3 28%, transparent 28%),
radial-gradient(circle, #fff 33%, transparent 33%),
linear-gradient(-50deg, #FFEB3B 34%, transparent 34%),
linear-gradient(60deg, #4CAF50 33%, transparent 33%),
linear-gradient(180deg, #FF756B 0, #F44336 30%, transparent 30%),
linear-gradient(-120deg, #FFEB3B 40%, transparent 40%),
linear-gradient(-60deg, #FFEB3B 30%, transparent 30%),
linear-gradient(0deg, #4CAF50 45%, transparent 45%),
linear-gradient(60deg, #4CAF50 30%, transparent 30%),
linear-gradient(120deg, #F44336 50%, transparent 50%),
linear-gradient(180deg, #F44336 30%, transparent 30%);
}
实现原理就是使用了多个渐变色放在div上,友协被遮住,视觉上就产生了想要的效果,是不是很强大!看了下图你就知道其实就是在div上加了很多个渐变。
box-shadow
上面的例子大都是对css3新属性的了解和认识,这个实例则是有关于解决方案的例子。
需求:我们要实现下面这个效果图(三个边框:黑色,绿色,红色):
解法一:假如没有css3知识,我们可以做这样做:用三个div,分别设置边框,然后分别控制宽高和位置来达到这个效果。显然,很复杂,这里就不贴代码了。
解法二:现在我们有css3的知识了,借助box-shadow就可以轻松解决这个问题。先来看看它的语法:box-shadow: [x偏移] [y偏移] [阴影模糊宽度] [阴影宽度] [颜色],并且还能添加多个阴影,使用逗号隔开。当然你还可以继续增加,四重边框,五重边框……都不再是问题啦。另外,还能加圆角,阴影会贴紧内层div。
使用这种方法,有一个缺点就是,不支持虚线边框。
解法三: 使用outline(只能支持两重边框)使用这种方法的缺点就是,只能支持两层的边框,而且还不能根据容器的border-radius自动贴合。
总结
通过这段时间对css3的深入了解,发现css3真的很强大,研究起来还是挺有趣的,只有想不到,感觉没有做不到。不过为了实现很酷炫的效果,可能需要编写大量的css代码,这个时候使用什么技术就需要我们自己来衡量了。
相关文章推荐
- 学习总结
- css基础之 id和选择器
- css基础之 语法
- CSS学习笔记--Div+Css布局(div+span以及盒模型)
- CSS-外边距(margin)
- CSS-轮廓(outline)
- CCS5.4+Proteus8的F28027实践课一、延时函数控制LED流水灯
- 《Head first HTML与CSS 第二版》读书笔记 第七章 CSS入门
- 《Head first HTML与CSS 第二版》读书笔记 第八章 文字样式
- css中position:relative问题记录
- 纯CSS完美实现垂直水平居中的6种方式
- 动画学习之Animate.css的使用与解析
- CSS reset
- 层模型--固定定位
- CSS 外边距(margin)重叠及防止方法
- 关于HTML和CSS中的命名
- 仅用CSS3创建h5预加载双旋圈
- 如何使用JS来改变CSS样式
- HTML,使用div+css实现自适应table布局
- 关于display的属性的那些事