金沙国际官网_金沙国际平台登录

因为这个金沙国际官网_金沙国际平台登录网站与很多的大型澳门赌场都有合作,金沙国际官网_金沙国际平台登录尽职尽责,高效执行,保持好奇心,不断学习,追求卓越,点击进入金沙国际官网_金沙国际平台登录马上体验吧,所以现在也正式地开始了营业。

您的位置:金沙国际官网 > web前端 > CSS3初体验之奇技淫巧,伪元素的妙用

CSS3初体验之奇技淫巧,伪元素的妙用

发布时间:2019-11-19 14:44编辑:web前端浏览(106)

    前面叁个工程——底工篇

    2015/08/28 · CSS, HTML5, JavaScript · 前端工程

    原稿出处: 张云龙(英文名:Leon卡塔尔国(@前端村里人工卡塔尔国   

    喂喂喂,那些切图的,把页面写好就发给研究开发程序猿套模板吧。

    你好,切图仔。

    不晓得你的组织怎么样定义前端开荒,据小编所知,时至前天依然有那多少个集体会把前端开垦归类为成品或许安排岗位,即便地位之争多罕有个别无谓,但自己对这种一孔之见照旧心中芥蒂,酝酿了长期,决定写二个层层的作品,试着从工程的角度系统的介绍一下自家对前面二个,越发是Web前端的领悟。

    假使大家还把温馨的干活看作为生机勃勃项软件开荒活动,那么自个儿言听谋决读过上边的剧情你也断定会有着共识。

    【CSS进级】伪成分的妙用–单标签之美

    2016/05/26 · CSS · 2 评论 · 伪元素

    本文作者: 伯乐在线 - chokcoco 。未经笔者许可,制止转发!
    接待到场伯乐在线 专辑审核人。

    多年来在研读 《CSS SECRET》(CSS揭秘卡塔尔国这本大作,对 CSS 有了越来越深档期的顺序的通晓,折腾了上边这几个体系:

    CSS3奇思妙想 — 德姆o (请用 Chrome 浏览器展开,特别值得豆蔻梢头看卡塔 尔(英语:State of Qatar)。选用单标签完结各个图案,好多图画与本文有关。

    也冀望认为不错的同校顺手在本身的 Github 点个 star : CSS3白日做梦 。

    正文自此处起初,本文首要汇报一下 伪成分 before 和 after 各种妙用。

     :before和::before的区别

    在介绍具体用法在此以前,简介下伪类和伪成分。伪类大家听的多了,伪成分恐怕听到的不是那么频仍,其实 CSS 对那多个是有分别的。

    图片 1图片 2

    有的时候你会意识伪类成分运用了八个冒号 (::) 并不是三个冒号 (:),那是 CSS3 标准中的一片段必要,目标是为了分歧伪类和伪成分,大相当多浏览器都帮助那三种象征方法。

    CSS

    #id:after{ ... } #id::after{ ... }

    1
    2
    3
    4
    5
    6
    #id:after{
    ...
    }
    #id::after{
    ...
    }

    单冒号(:)用于 CSS3 伪类,双冒号(::)用于 CSS3 伪成分。对于 CSS2中早就局地伪成分,比方 :before,单冒号和双冒号的写法 ::before 作用是大同小异的。

    据此,假若您的网址只需要协作 webkit、firefox、opera 等浏览器,建议对于伪成分接受双冒号的写法,要是一定要合作 IE 浏览器,如故用 CSS2 的单冒号写法比较安全。

    更是具体的新闻,能够看看 MDN 对伪类和伪元素的理解。
    正文的头角崭然正是伪成分 before 和 after ,上边将现实讲讲那一个伪成分的魅力。

    动用 after 肃清浮动

    其生机勃勃估计是前面一个都掌握,运用 after 伪成分消亡页面浮动,不做过多解释。

    CSS

    .clearfix:after {content:"."; display:block; height:0; visibility:hidden; clear:both; } .clearfix { *zoom:1; }

    1
    2
    .clearfix:after {content:"."; display:block; height:0; visibility:hidden; clear:both; }
    .clearfix { *zoom:1; }

    伪元素与 css sprites Coca Cola图

    其少年老成也是老姿势了。7-Up图大家应该也不素不相识,通过将七个图片 icon 合为一张图,进而为了减少 http 诉求,相当多网址对7-Up图的必要依然非常的大的。

    不过在制作7-Up图的进程中,或然未来无数的包装工具自动生成的Pepsi-Cola图,都留存着索要为每种icon 供给预先流出多少边距的主题材料。看看下图:

    图片 3–> 图片 4

    譬如说上边这种意况(假使按键中的Logo是选用了Pepsi-Cola图卡塔 尔(阿拉伯语:قطر‎,产物某天猛然供给开关从气象左变为状态右,那么Pepsi-Cola图原先预先留下的职责边距确定就相当不够了,导致别的图形出今后开关中。

    而大家经常不会为了叁个小 icon 多加多一个标签(不符合语义化卡塔尔国。

    故而经常这种景观要求用到七喜图的话,都以在开关中设置三个伪元素,将伪成分的高宽设置为原来icon 的尺寸,再使用相对定位一定到须求的地点,那样无论七喜图种种 icon 的边距是不怎么,都能够完美适应。

    单个颜色完成开关 hover 、active 的明暗变化

    方今项目有个那样的要求,依照不相同的事情场景,运转供给配备二个开关的不等背景象值。可是大家领略,一个开关平时来讲是有 3 个色值的,normal 状态的,hover 状态的和 active 状态的,常常 hover 是比原色微微亮一点,active 则是有一点点暗一点。

    差不离是如此(下图卡塔尔国:

    图片 5

    为了缓慢解决运行同学的担任,如何做到只布置二个背景观不铺排 hover 和 active 颜色让开关也能自适应跟随变化吗。是的,用上 before、after 五个伪元素能够成功。

    颜色小知识

    此地要遍布一下颜色值的小知识。大家熟稔的颜色代表法除了 #fff ,rgb(255,255,255),还有 hsl(0, 100%, 100%)(HSV)。

    以 HSL 为例,它是生龙活虎种将 CR-VGB 色彩模型中的点在圆柱坐标系中的表示法。HSL 即色相、饱和度、亮度(葡萄牙语:Hue, Saturation, Lightness卡塔 尔(英语:State of Qatar)。

    对此贰个使用 HSL 表示的颜料,大家只需求更改 L (亮度卡塔尔国的值,就足以拿走叁个更加亮一点要么越来越暗一点的水彩。

    当然改造亮度,还是能通过叠合透明层完结,这里运用伪元素退换开关背景象便是经过叠合半透明层实现。

    简轻松单来讲,在背景观上方叠合叁个赫色半透明层 rgba(255,255,255,.2) 能够赢得多个更加亮的颜料。(那句话不是很审慎,要是三个要素背景是中蓝颜色,叠合巴黎绿半透明层也是不会越来越亮的卡塔尔国

    相反,在背景象上方叠合叁个青灰半透明层 rgba(0,0,0,.2) 可以获取二个更加暗的颜料。

    故而,大家用 before 伪成分生成二个与按键大小形似的孔雀蓝半透明层 rgba(0,0,0,.2),在 .btn:hover:before 时显示,用 after 伪成分生成二个与按键大小肖似的反动半透明层 rgba(255,255,255,.2),在 .btn:active:before 时显得,就足以成功只安顿一个背景底色,实现 hover 、active 的时的明暗变化。

    .pesudo:before{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index:-1; background:rgba(0,0,0,.1); } .pesudo:hover:before{ content:""; } .pesudo:after{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index:-1; background:rgba(255,255,255,.2); } .pesudo:active:after{ content:""; }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    .pesudo:before{
      position: absolute;
      top: 0; right: 0; bottom: 0; left: 0;
      z-index:-1;
      background:rgba(0,0,0,.1);
    }
    .pesudo:hover:before{
      content:"";
    }
    .pesudo:after{
      position: absolute;
      top: 0; right: 0; bottom: 0; left: 0;
      z-index:-1;
      background:rgba(255,255,255,.2);
    }
    .pesudo:active:after{
      content:"";
    }

    戳我看demo (请用 Chrome 浏览器展开卡塔尔国。

    变形苏醒

    意气风发部分时候,设计员们企盼通过一些比较奇特的几何图形,表明分歧的意思。

    图片 6图片 7图片 8

    用 CSS3 transfrom 属性,我们得以轻便的获取三个梯形,菱形只怕平行四边形。不经常我们设计师们期望在此些器皿内配上文字,譬喻平行四边形可以表明大器晚成种速度之感。

    但是如上图所示,内容文字也会随之 CSS3 转变一齐发生了扭转,平日大家会用叁个 div 做背景展开转换,而文字则是位于其余二个 div 中。

    可是使用伪成分,大家得以去掉那一个不合语义化多余的价签,运用 before 伪元素,将 CSS3 转变效率于伪成分上,这样变形不会功用于位于 div 上的的文字,何况从不运用多余的价签。

    戳我看demo (请用 Chrome 浏览器张开卡塔 尔(阿拉伯语:قطر‎。

    伪成分实现换行,替代<br>换行标签

    世家都明白,块级成分在不脱离平日布局流的状态下是会活动换行,而行级成分则不会自行换行。但在项目中,有要求是急需让行级成分也自动换行的,常常这种状态,小编都以用
    换行标签消亡。而 《CSS SECRET》 中对
    标签的陈诉是,这种办法不但在可维护性方面是意气风发种不佳的试行,何况污染了结构层的代码。 用脑筋想本身敲代码以来,用的
    标签还真不菲。

    应用 after 伪成分,可以有风流倜傥种特别高贵的解决方案:

    .inline-element::after{ content: "A"; white-space: pre; }

    1
    2
    3
    4
    .inline-element::after{
        content: "A";
        white-space: pre;
    }

    经过给元素的 after 伪元素增加 content 为 “A” 的值。这里 A 是怎么样啊?

    有一个Unicode 字符是专程代表换行符的:0x000A 。 在 CSS 中,这一个字符能够写作 “00A”, 或简化为 “A”。这里大家用它来作为 ::after 伪成分的从头到尾的经过。也便是在要素末尾增添了多少个换行符的情致。

    而 white-space: pre; 的职能是保存成分后边的空白符和换行符,结合两方,就足以轻易实今后行内级成分末尾完结换行。
    原文Demo。

    more magic — 单标签图案

    上边介绍的是伪成分众多用法的生龙活虎局部,伪元素的机能远不唯有于此。有了before 、after 五个伪成分。一个标签其实能够生机勃勃对生机勃勃于 3 个标签来利用,而合作 CSS3 强大的 3D 转变、多种背景,多种阴影等手腕,让单标签作画成为了恐怕,上面是本人仅用单个标签,实现的生龙活虎部分动漫片效果:

    单标签完成浏览器Logo:

    图片 9图片 10 图片 11

    单标签天气Logo:

    图片 12图片 13图片 14图片 15图片 16

    CSS3奇思妙想,采纳单标签完结种种图案 — 德姆o (请用 Chrome 浏览器张开,特别值得风流浪漫看卡塔尔。

    也可望认为不错的同桌顺手在自家的 Github 点个 star : CSS3奇思妙想 。

    仰望那篇小说对我们具备利于,特别是在对标题化解的考虑层面上。到此本文停止,借使还宛怎么样疑难依旧提议,能够多多调换,原创小说,文笔有限,胸无点墨,文中若有不正的地方,万望告知。

    固然本文对你有帮衬,请点下推荐,写小说不便于。

    打赏支持自个儿写出越来越多好文章,多谢!

    打赏笔者

    CSS3初体验之奇伎淫巧

    2016/07/22 · CSS

    原作出处: luckykun   

    自CSS3风靡的话,固然在此以前看过贰遍全部的新扩展属性,但实际上在实质上项目中用到的少之甚少。所以并未有变异系统性的认知,以至观察效果立马就能够体会明白解决方案的力量。然后近期恰好遭遇二个须要绘制多量动漫片的供给,所以决定趁此机缘好好钻研一下那一个既熟知又目生的css3。

    在正经八百启幕css3以前,先来介绍部分比较特出的css3实例,让大家美青睐受一下css3的吸引力,本文仲涉及以下多少个css3的属性:

    border-radius、::after、attr和content、box-sizing、linear-gradient、radial-gradient、box-shadow

    前端,是一种GUI软件

    现目前前端可谓百样玲珑,成品形象异彩纷呈,涉猎极广,什么惊天动地上的底工库/框架,拽光彩夺目的宣扬页面,还应该有屌炸天的小游戏……可是这几个少年老成多少个公文的小品种决不是前者本事的关键使用处景,更具商业价值的则是复杂的Web应用,它们功用康健,分界面好些个,为客户提供了全部的产品体验,只怕是情报聚合网址,或许是在线购物平台,或然是交际互连网,或许是财政和经济信用贷款应用,可能是音乐相互作用社区,也会有可能是录制上传与享受平台……

    从精气神上讲,全体Web应用都以大器晚成种运营在网页浏览器中的软件,这么些软件的图形客户分界面(Graphical User Interface,简单的称呼GUI卡塔尔即为前端。

    如此复杂的Web应用,动辄几十上百人合营开采维护,其前端分界面平日也颇负规模,工程量不亚于平日的观念GUI软件:

    图片 17

    即便Web应用的复杂程度比比皆已经,客户对其前端分界面也提出了更加高的须要,但时至明天依旧十分少前端开垦者会从软件工程的角度去探讨前端开垦,来助力团队的付出效用,更有甚者还对后者保留着”如玩具般轻巧“的比葫芦画瓢印象,春去秋来,茹毛饮血。

    历史持久的前端开辟,始终疑似放养的野孩子,原始如斯,不免令人感叹!

    打赏援助笔者写出越多好作品,感激!

    任选后生可畏种支付办法

    图片 18 图片 19

    3 赞 7 收藏 2 评论

    border-radius

    • 相信那本性子,写过css的同班都晓得,用来发出圆角,比如画三个圆形:
    CSS
    
    div { width:100px; height:100px; background:red;
    border-radius:100px; //border-radius:100%; }
    
    <table>
    <colgroup>
    <col style="width: 50%" />
    <col style="width: 50%" />
    </colgroup>
    <tbody>
    <tr class="odd">
    <td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
    <div class="crayon-num" data-line="crayon-5b8f6cdb8ba28662560133-1">
    1
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6cdb8ba28662560133-2">
    2
    </div>
    <div class="crayon-num" data-line="crayon-5b8f6cdb8ba28662560133-3">
    3
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6cdb8ba28662560133-4">
    4
    </div>
    <div class="crayon-num" data-line="crayon-5b8f6cdb8ba28662560133-5">
    5
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6cdb8ba28662560133-6">
    6
    </div>
    </div></td>
    <td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
    <div id="crayon-5b8f6cdb8ba28662560133-1" class="crayon-line">
    div {
    </div>
    <div id="crayon-5b8f6cdb8ba28662560133-2" class="crayon-line crayon-striped-line">
        width:100px;
    </div>
    <div id="crayon-5b8f6cdb8ba28662560133-3" class="crayon-line">
        height:100px;
    </div>
    <div id="crayon-5b8f6cdb8ba28662560133-4" class="crayon-line crayon-striped-line">
        background:red;
    </div>
    <div id="crayon-5b8f6cdb8ba28662560133-5" class="crayon-line">
        border-radius:100px; //border-radius:100%;
    </div>
    <div id="crayon-5b8f6cdb8ba28662560133-6" class="crayon-line crayon-striped-line">
    }
    </div>
    </div></td>
    </tr>
    </tbody>
    </table>
    
    
    [![](http://7xtawy.com1.z0.glb.clouddn.com/css31.png)](http://7xtawy.com1.z0.glb.clouddn.com/css31.png)
    
    • 然后我们来探视它的语法:border-radius: [左上] [右上] [右下] [左下],于是我们来画贰个半圆
    CSS
    
    div { width: 100px; height: 50px; background: red; border-radius:
    50px 50px 0 0; }
    
    <table>
    <colgroup>
    <col style="width: 50%" />
    <col style="width: 50%" />
    </colgroup>
    <tbody>
    <tr class="odd">
    <td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
    <div class="crayon-num" data-line="crayon-5b8f6cdb8ba34696842044-1">
    1
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6cdb8ba34696842044-2">
    2
    </div>
    <div class="crayon-num" data-line="crayon-5b8f6cdb8ba34696842044-3">
    3
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6cdb8ba34696842044-4">
    4
    </div>
    <div class="crayon-num" data-line="crayon-5b8f6cdb8ba34696842044-5">
    5
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6cdb8ba34696842044-6">
    6
    </div>
    </div></td>
    <td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
    <div id="crayon-5b8f6cdb8ba34696842044-1" class="crayon-line">
    div {
    </div>
    <div id="crayon-5b8f6cdb8ba34696842044-2" class="crayon-line crayon-striped-line">
        width: 100px;
    </div>
    <div id="crayon-5b8f6cdb8ba34696842044-3" class="crayon-line">
        height: 50px;
    </div>
    <div id="crayon-5b8f6cdb8ba34696842044-4" class="crayon-line crayon-striped-line">
        background: red;
    </div>
    <div id="crayon-5b8f6cdb8ba34696842044-5" class="crayon-line">
        border-radius: 50px 50px 0 0;
    </div>
    <div id="crayon-5b8f6cdb8ba34696842044-6" class="crayon-line crayon-striped-line">
    }
    </div>
    </div></td>
    </tr>
    </tbody>
    </table>
    
    
    [![](http://7xtawy.com1.z0.glb.clouddn.com/css32.png)](http://7xtawy.com1.z0.glb.clouddn.com/css32.png)
    
    • 那纵然要画叁个椭圆该怎么做呢?你会发觉上边的语法貌似做不到了,其实border-radius的值还只怕有生龙活虎种语法: x半径/y半径:  
    CSS
    
    div { width: 100px; height: 50px; background: red; border-radius:
    50px/25px; }
    
    <table>
    <colgroup>
    <col style="width: 50%" />
    <col style="width: 50%" />
    </colgroup>
    <tbody>
    <tr class="odd">
    <td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
    <div class="crayon-num" data-line="crayon-5b8f6cdb8ba3a532261250-1">
    1
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6cdb8ba3a532261250-2">
    2
    </div>
    <div class="crayon-num" data-line="crayon-5b8f6cdb8ba3a532261250-3">
    3
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6cdb8ba3a532261250-4">
    4
    </div>
    <div class="crayon-num" data-line="crayon-5b8f6cdb8ba3a532261250-5">
    5
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6cdb8ba3a532261250-6">
    6
    </div>
    </div></td>
    <td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
    <div id="crayon-5b8f6cdb8ba3a532261250-1" class="crayon-line">
    div {
    </div>
    <div id="crayon-5b8f6cdb8ba3a532261250-2" class="crayon-line crayon-striped-line">
        width: 100px;
    </div>
    <div id="crayon-5b8f6cdb8ba3a532261250-3" class="crayon-line">
        height: 50px;
    </div>
    <div id="crayon-5b8f6cdb8ba3a532261250-4" class="crayon-line crayon-striped-line">
        background: red;
    </div>
    <div id="crayon-5b8f6cdb8ba3a532261250-5" class="crayon-line">
        border-radius: 50px/25px;
    </div>
    <div id="crayon-5b8f6cdb8ba3a532261250-6" class="crayon-line crayon-striped-line">
    }
    </div>
    </div></td>
    </tr>
    </tbody>
    </table>
    
    [![](http://7xtawy.com1.z0.glb.clouddn.com/css33.png)](http://7xtawy.com1.z0.glb.clouddn.com/css33.png)
    
    • 要是本人要画半个椭圆,又要如何做呢?
    CSS
    
    div { width: 100px; height: 50px; background: red; border-radius:
    100% 0 0 100% /50%; }
    
    <table>
    <colgroup>
    <col style="width: 50%" />
    <col style="width: 50%" />
    </colgroup>
    <tbody>
    <tr class="odd">
    <td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
    <div class="crayon-num" data-line="crayon-5b8f6cdb8ba40391709445-1">
    1
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6cdb8ba40391709445-2">
    2
    </div>
    <div class="crayon-num" data-line="crayon-5b8f6cdb8ba40391709445-3">
    3
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6cdb8ba40391709445-4">
    4
    </div>
    <div class="crayon-num" data-line="crayon-5b8f6cdb8ba40391709445-5">
    5
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6cdb8ba40391709445-6">
    6
    </div>
    </div></td>
    <td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
    <div id="crayon-5b8f6cdb8ba40391709445-1" class="crayon-line">
    div {
    </div>
    <div id="crayon-5b8f6cdb8ba40391709445-2" class="crayon-line crayon-striped-line">
        width: 100px;
    </div>
    <div id="crayon-5b8f6cdb8ba40391709445-3" class="crayon-line">
        height: 50px;
    </div>
    <div id="crayon-5b8f6cdb8ba40391709445-4" class="crayon-line crayon-striped-line">
        background: red;
    </div>
    <div id="crayon-5b8f6cdb8ba40391709445-5" class="crayon-line">
        border-radius: 100% 0 0 100% /50%;
    </div>
    <div id="crayon-5b8f6cdb8ba40391709445-6" class="crayon-line crayon-striped-line">
    }
    </div>
    </div></td>
    </tr>
    </tbody>
    </table>
    
    [![](http://7xtawy.com1.z0.glb.clouddn.com/css34.png)](http://7xtawy.com1.z0.glb.clouddn.com/css34.png)
    

    前端工程的四个阶段

    当今的前端开辟倒也毫不一贫如洗,回想一下已经经验过或听新闻说过的门类,为了升高其前端开采效用和平运动作质量,前端团队的工程建设大约会经历八个等第:

    关于我:chokcoco

    图片 20

    经不住流年似水,逃不过此间少年。 个人主页 · 作者的稿子 · 63 ·    

    图片 21

    ::after

    这里拿个大致的例证来看,咱们要画三个放大镜,如下图:

    图片 22

    分析一下,这几个会聚透镜能够由多个div组成,叁个是血牙红的圆环,多个是鲜黄把手(旋转45度卡塔 尔(阿拉伯语:قطر‎。所以大家就供给用多个div来落到实处呢?答案是NO,叁个div也是足以的,大家能够依赖::after来增添三个因素。同理假使供给四个div,大家还足以行使::before再增添四个要素。下边看一下代码:

    CSS

    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); }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    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);
    }

    第少年老成品级:库/框架选型

    图片 23

    前面四个工程建设的率先项职分正是依靠项目特点举行技巧选型。

    基本上现在尚无人统统从0发轫做网站,哪怕是政党项目用个jquery都很正规啊,React/Angularjs等框架盛气凌人,解放了重重临盆力,合理的技艺选型可以为项目节省数不胜数工程量这一点无庸置疑。

    attr和content

    诸如大家要贯彻三个漂浮提醒的效果与利益。传统方法,使用title属性就能够兑现,但是今后大家要更玄妙,能够动用css3提供的attr:能够在css中获取到元素的某个属性值,然后插入到伪元素的content中去。

    设若大家的html代码如下:

    XHTML

    <div data-title="hello, world">hello...</div>

    1
    <div data-title="hello, world">hello...</div>

    咱俩来看看完结那几个插件的css代码:

    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; }

    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;
    }

    当hover的时候,在要素尾部加多二个剧情为data-title属性值的要素,所以就落到实处了hover突显的法力,如下图所示:

    图片 24

    本文由金沙国际官网发布于web前端,转载请注明出处:CSS3初体验之奇技淫巧,伪元素的妙用

    关键词:

上一篇:没有了

下一篇:没有了