CSS伪类对象before和after的用法实例详解

2020-05-09 06:58:19易采站长站整理

如果bottom-right省略它就等于top-left,如果top-right省略它就等于top-left(有点对角的关系)

3、应用范围:应用所有元素,除了table的样式属性是boder-collapse为collapse。

我们看看常见的写法有哪些?以及对应的解释是什么?

很全很强大! 这个网址好啊:http://www.designcss.org/archives/border-radius.html 所以当你知道你想要多大多圆多扁的形状时,可以通过设置准确的数值来呈现出来,我觉得这个要几何学的好很有用处啊啊啊。 PS:radius就是半径的意思,所以用这个属性可以做出圆角的效果,当然也可以做出圆形的效果,原理:正方形的内切圆半径等于正方形边长的一半。 box-shadow开始啦啦!!
简单的理解就是让你的这个盒子有个阴影效果,以前很多设计师都喜欢搞这个,不过现在朝扁平化发展后,用的较少了,
不过存在即有它本身的道理。用的好还是很漂亮的。

语法:box-shadow:<阴影类型> <x轴位移> <y轴位移> <阴影模糊半径>? <阴影扩展半径>?||<阴影颜色> 阴影水平偏移值可取正负值,垂直偏移值可取正负值。
当不设阴影类型时默认为投影,当设为inset属性时为内阴影,x轴和y轴虽然不等同但类似于ps里面的角度和位置。阴影扩展半径为可选,但是只能为正值,如果为0,则没有模糊效果,
扩展半径也为可选,取值可正可负,如果为正,阴影延展扩大,如果为负则缩小。阴影颜色也是可选,如果不设置的话,则为浏览器的默认颜色,但各个浏览器的默认色不一样,所以最好
还是设置哈。

如图:

可以比照着它多练练。阴影大小、扩展、颜色和Photoshop里面的都同理。
如:box-shadow:inset 0 0 1px #fff表示没有偏移量,1像素模糊的白色内阴影这里的#fff是HEX值。
有时我们这样写:box-shadow:inset 0 0 1px rgba(255,255,255,.5)
这里使用的RGBA值,RGBA值的好处是,它多了一个Alpha透明值,你可以控制阴影的透明度。

有些想写复杂些,效果更炫的,可以使用多阴影。但是要注意顺序的问题,最先写的阴影将显示在最外层,如

.div{box-shadow:0 0 10px #F69,0 0 10px 10px yellow}

      显示如下:

  看#f69的颜色值显示在yellow上面。因为黄色的阴影扩展了10像素。比f69的宽些,所以不会被f69给挡住。