CSS伪类目标before和after的用法案例详解

2021-03-09 21:30 jianzhan

1直觉得这两个伪类目标并不是很关键,而且IE对它两弟兄其实不适用,因此也沒有如何静下心来科学研究,仅有在清晰波动clearfix的情况下会用到哈,别的都很 少用!但是近期在科学研究css3的情况下感觉它两个的配搭不但可以降低编码量而且能整出很巴适的实际效果,因此就来科学研究科学研究哈!

 1、先看来哈她们的界定哈!

1、selector:before( sRules ) 它要和content特性1起应用,设定在目标前(根据目标树的逻辑性构造)产生的內容;

2、selector:after( sRules ) 和before用法1样,但是它是设定在目标后(根据目标树的逻辑性构造)产生的內容;

看事例非常容易了解些!

拷贝编码
编码以下:

<style>
.div{width:350px; border:1px solid #000; line-height:50px; margin:10px;}
.divb{width:500px; border:1px solid #FC0;}
.after,.before,.block{border:1px solid #330;}
.after:after{content:'我在后边吧'; color:#F00;}
.before:before{content:'我在前面吧'; color:#F00;}
.block:after{content:'我是块元素,我占1行'; color:#F00; display:block;}
.block{display:block;}
</style>
<body>
<div class="div">after<span class="after">我是里边的內容</span></div>
<div class="div">before<span class="before">我是里边的內容</span></div>
<div class="divb">block<span class="block">我是里边的內容</span></div>
</body>

运作結果如图!我为何要把<span class="block">变换为块级元素呢?由于块元素插进内联元素不符规范,不标准,不转换的话显示信息有难题。我也不清晰.

下面大家来 看看css3的相互配合着它的运用是哪种的?

拷贝编码
编码以下:

<style>
.bottle{width:100px; position:relative;}
.bottle_top{position:relative; width:80px; height:30px; border:1px solid rgba(255,255,255,0.5);border-bottom:0 none; border-top:0 none; margin:0 auto;}
.bottle_top:after,.bottle_top:before{content:''; display:block; height:10px; width:78px; border-radius:46px/10px; border:2px solid rgba(255,255,255,.5);border-bottom:2px solid rgba(255,255,255,.4);border-top:1px solid rgba(255,255,255,.6); position:absolute; left:⑴px;box-shadow:0px 0px 6px rgba(255,255,255,0.6) inset;}
.bottle_top:after{top:⑹px;box-shadow:0px 0px 6px rgba(255,255,255,0.6) inset,0px 3px 3px ⑴px rgba(255,255,255,0.3);}
.bottle_top:before{top:24px;box-shadow:0px 0px 6px rgba(255,255,255,.4) inset;}
.bottle_mouth{height:52px; width:44px; margin:0 auto; position:relative; background:none; border:1px solid rgba(0,0,0,0.04);border-top:none; border-bottom:none;background:-moz-linear-gradient(left,rgba(255,255,255,0.3),rgba(255,255,255,0) 5%,rgba(255,255,255,0) 95%,rgba(255,255,255,0.3)); box-shadow:0px 0px 6px rgba(255,255,255,0.3);}
.bottle_mouth:after{height:6px; width:44px; content:''; display:block; border-radius:25px/6px;border:1px solid rgba(255,255,255,.4); position:absolute; left:⑴px; top:⑷px;z-index:1; box-shadow:0px 0px 3px rgba(255,255,255,0.3);}
.bottle_top .highlight{width:20px; height:30px; display:block; position:absolute; left:5px; top:5px; -moz-transform:skew(0deg,5deg);background:-moz-linear-gradient(left,rgba(255,255,255,0.1),rgba(255,255,255,0.6) 4%,rgba(255,255,255,0.2) 98%,rgba(255,255,255,0));}
.bottle_top .highlight:after{content:''; display:block; width:2px; height:30px; position:absolute; top:⑴px; left:⑶px; -moz-transform:skew(0deg,5deg); background:rgba(255,255,255,.3);}
</style>
<body>
<div class="main">
<div class="bottle">
<div class="bottle_top">
<div class="bottle_mouth"></div>
<div class="highlight"></div>
</div>
</div>
</div>
</body>

由于用了css3,因此提议還是還是在firefox下面预览!

虽然较为抽象性,我不说你们应当不知道道是个玻璃瓶的盖子吧 瓶身一部分的编码量太多了就不帖了。

因此before和after应用的好能够节约html标识,而且相互配合css3做出很好的实际效果,自然做着玩的,并不是太好用。

2、下面顺便说些css3的特性吧,(border-radius&box-shadow)我也只是正在渐渐地探求中···········

border-radius刚开始啦!!

1、border-radius:none | <length>{1,4} [ / <length>{1,4} ]?

有关特性:border-top-right-radius border-bottom-right-radius border-bottom-left-radius border-top-left-radius,实际上border-radius便是她们4个特性的简写。

赋值:<length>由浮点数据和企业标志符构成的长度值,不能能负值。

看这幅图表明,要不然非常容易晕。

表明:

1、第1个值即x是指水平半径。

2、假如第2个省略即y,则他等于第1个值,这时候这个角便是1个4分之1的圆角。

3、假如随意1个值为0,则这个角为矩形框,不容易为圆形。

4、值不容许是负值。

当border-radius:<length>{1,4} [ / <length>{1,4} ]?时

1、假如斜线前后左右的值都存在,那末斜线前的值设定为水平半径(x),斜线后的值设定为竖直半径(y),假如沒有斜线则水平半径和竖直半径相同,

也就非常于4分之1个圆。如:border-radius:46px/10px;4个角的半径尺寸都为46px/10px。

2、4个值的次序是依照top-left,top-right,bottom-right,bottom-left(总之是顺时针啊?逆时针啊?)假如bottom-left省略它就等于top-right,

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

3、运用范畴:运用全部元素,除table的款式特性是boder-collapse为collapse。

大家看看普遍的写法有哪些?和对应的解释是甚么?

很全很强劲! 这个网站地址好啊:http://www.designcss.org/archives/border-radius.html 因此当你了解你要想多大多数圆多扁的样子时,能够根据设定精确的标值来展现出来,我感觉这个要几何图形学的好很有效处啊啊啊。 PS:radius便是半径的意思,因此用这个特性能够做出圆角的实际效果,自然还可以做出圆形的实际效果,基本原理:正方形的内切圆半径等于正方形边长的1半。 box-shadow刚开始啦啦!!
简易的了解便是让你的这个盒子有个黑影实际效果,之前许多设计方案师都喜爱搞这个,但是如今朝扁平化发展趋势后,用的较少了,
但是存之际有它自身的道理。用的好還是很好看的。

英语的语法:box-shadow:<黑影种类> <x轴位移> <y轴位移> <黑影模糊不清半径>? <黑影拓展半径>?||<黑影色调> 黑影水平偏位值可取正负值,竖直偏位值可取正负值。
当不设黑影种类时默认设置为投射,当设为inset特性时为内黑影,x轴和y轴尽管不等同于但相近于ps里边的角度和部位。黑影拓展半径为可选,可是只能为恰逢,假如为0,则沒有模糊不清实际效果,
拓展半径也为可选,赋值可正可负,假如为正,黑影延展扩张,假如为负则变小。黑影色调也是可选,假如不设定的话,则为访问器的默认设置色调,但各个访问器的默认设置色不1样,因此最好是
還是设定哈。

如图:

能够对比着它多练练。黑影尺寸、拓展、色调和Photoshop里边的都同理。
如:box-shadow:inset 0 0 1px #fff表明沒有偏位量,1像素模糊不清的白色内黑影这里的#fff是HEX值。
有时大家这样写:box-shadow:inset 0 0 1px rgba(255,255,255,.5)
这里应用的RGBA值,RGBA值的益处是,它多了1个Alpha全透明值,你能够操纵黑影的全透明度。

一些想写繁杂些,实际效果更炫的,可使用多黑影。可是要留意次序的难题,最开始写的黑影将显示信息在最外层,如

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

      显示信息以下:

  看#f69的色调值显示信息在yellow上面。由于黄色的黑影拓展了10像素。比f69的宽些,因此不容易被f69给挡住。

下面大家看1个4色的黑影。

.div{box-shadow:⑴0px 0 red, 10px 0 blue,0 ⑴0px yellow,0 10px green; width:200px; height:100px; background:#6C9;}

  显示信息以下:

看到照片将会会想说,它是如何明确红、蓝、黄、翠绿色的部位,为何恰好就在盒子的4个边?实际上给目标4边设计方案黑影,大家是根据更改x-offset和y-offset的正负值来完成,在其中x-offset 为负值时,转化成左侧黑影,为恰逢时转化成右侧黑影,y-offset为恰逢是转化成底部黑影,为负值时转化成顶部黑影。假如x-offset和y-offset设定为0 的话那末这个盒子的4周都会有黑影。

下面大家给4个边都设定上模糊不清值,1起看来看见效果。

.box{width:200px; height:100px;background:#6C9; box-shadow:⑴0px 0 10px red, 10px 0 10px blue,0 ⑴0px 10px yellow,0 10px 10px green;}

显示信息以下:

这样大家就得出了这样的結果:鲜红色黑影在顶部黄色黑影上,右侧蓝色的黑影在底部翠绿色黑影上。因此多黑影的写法1定要留意次序的难题。
非常是当模糊不清值不1样的状况下,
由于在应用多层级的黑影时还需留意1个细节难题,假如前面的黑影模糊不清值小于后边的黑影模糊不清值,那末前面的显示信息在后边之上,
假如前面黑影的模糊不清值超过后边的黑影模糊不清值,那末前面的黑影将遮挡住后边的黑影实际效果

是否口水话太多,写的过长都还没逻辑性性啊?也有题目有点难题···