>

就是使用CSS outline澳门博发娱乐官网: 属性,专

- 编辑:澳门博发娱乐官网 -

就是使用CSS outline澳门博发娱乐官网: 属性,专

一、微云的实现

网站有一些改动的时候,为了让用户熟知新的操作位置,往往会增加一个引导,常见的方式就是使用一个黑色的半透明蒙版,然后需要关注的区域是镂空的。

然后上周五我去微云转悠的时候,也看到了引导层,于是职业病又犯了,去学习下别人是怎么实现的。下面是观测的结果:

为了实现镂空蒙层效果,作者发挥了小时候拼积木的才能,使用两层HTML结构,内层使用5块独立区域拼接形成,至于中间镂空的区域的阴影则是使用的图片实现的。

澳门博发娱乐官网 1

澳门博发娱乐官网 2

虽然最终的效果满足了产品的需求,对于用户而言,目的已经达到。但是,从代码质量层面、潜在的体验提升可能性、使用场景广度上来讲,还是弱了很多的。

举例来说,如果我们某个提示区域面积很大,那中间的那个镂空区域尺寸是不是要变,那后面的背景图片怎么办?搞新图,有人看到了使用了background-size:cover, 那IE7,IE8怎么办?哦,可能微云不需要管IE7, IE8.

如果不需要管IE7, IE8,那这里的实现就显得更加小白了。我们实际上只需要一层标签,一层空标签就可以实现我们的效果,且不需要图片。

后来我发现了一种更好的实现方式,就是使用CSS outline 属性, outline 属性为元素的轮廓,并不会增加任何元素的尺寸,也不会破坏原先的布局,因此我们只需要设一个非常非常大的 outline 宽度值,我们定位元素就永远天然镂空,根本不需要计算上下左右的半透明黑色区有多大。

jquery.guide.js新版上线操作向导镂空提示jQuery插件(推荐),新版qq语音测试向导

一、有请jquery.guide.js

网站上线或者改版的时候,常常会做一个操作向导,告诉用户一些重要操作到了哪里,或者什么地方隐藏了什么好玩的东西,等等,虽然我都是直接关掉的,或者快速跳过,但是对有部分用户而言还是很有用的。

这种提示比较好的交互效果是采用镂空的半透明遮罩,视觉重点一目了然,类似这样:

我在去年的时候曾经写了一篇文章,名为“ 腾讯微云黑色遮罩引导蒙版更好的CSS实现方式 ”,介绍如何使用单标签,实现类似的交互效果,其中,核心技巧是使用了CSS border 属性,也就是周围的黑色半透明遮罩实际上是半透明边框。

后来我发现了一种更好的实现方式,就是使用CSS outline 属性, outline 属性为元素的轮廓,并不会增加任何元素的尺寸,也不会破坏原先的布局,因此我们只需要设一个非常非常大的 outline 宽度值,我们定位元素就永远天然镂空,根本不需要计算上下左右的半透明黑色区有多大。

.guide {
  outline: 9999px solid rgba(0,0,0,.75);
}

最近正好有个改版项目有类似的需求,我要基于这个原理顺便整了一个jQuery插件,名为jquery.guide.js,专门用来实现黑色半透明遮罩镂空提示引导效果。

实例demo地址: demo地址戳这里

二、jquery.guide.js小插件的优势

jquery.guide.js 小插件的优势如下:

1.使用方便,直接引入JS就好了,无需引入CSS资源;
2.支持浏览器的滚动以及缩放的重定位;
3.支持浏览器键盘操作,如上下键和左右键上一步下一步,ESC键退出等;
4.支持页面异步呈现的元素的引导;
5.内置是否提示检测,也就是内置只会提示一次的处理,基于localStorage进行首次判断;
6.兼容到IE8浏览器;

然后,一些偷懒的地方:

  1. 默认是使用 outline 属性实现的,因此不支持圆角,如果你想实现类似下图的效果:

澳门博发娱乐官网 3 

则可以使用CSS box-shadow 属性模拟半透明遮罩效果,在 jquery.guide.js 源代码中,其实已经给大家都准备好了,如下图:

澳门博发娱乐官网 4 

正如源代码中的注释所言,如果想支持圆角,注释上面的 outline ,放开下面两行 box-shadow 和 border-radius 的注释就可以了。

.guide {
  box-shadow: 0 0 0 9999px rgba(0,0,0,.75);
  border-radius: 50%;
}

其中 box-shadow: 0 0 0 9999px 表示原地阴影扩展 9999px 的意思,再用户看来,就是一个满屏黑色半透明的遮罩。

至于不支持CSS3 box-shadow 和 border-radius 的IE8浏览器还是 outline 直角效果。

2.z-index 层级以及半透明遮罩层的透明度都没有作为参数放开,因为新手引导提示基本都是一次性的,如果大家觉得 z-index 层级或者 opacity 透明度不满意,直接修改JS源代码即可。

三、jquery.guide.js小插件的语法和使用

语法如下:

$.guide(options);

其中, options 为数组,数组项为格式一致的包含提示信息相关参数的对象,这个对象统一的默认值为:

var defaults = {
  selector: '', 
  content: '', 
  align: 'center',
  offset: {
    x: 0,
    y: 0
  }
};

使用时候类似这样:

$.guide([{
  selector: '#target'
}]);

其中:

•selector 表示需要镂空暴露的目标元素的选择器,如果该选择器可以匹配多个元素,则使用该选择去匹配的第一个元素作为目标元素;如果无法匹配元素,则整个这个参数对象会被忽略。
•content 表示镂空区域内额外显示的内容,可以是HTML字符串,也可以是jQuery包装器对象。
•align 表示显示内容的对齐方式,是左对齐居中对齐还是右对齐?可选关键字值包括: left , center , right . 其中 center 是默认值。
•offset 表示偏移的水平垂直距离, x 那是水平偏移位置,计算规则与 align 参数值有关, y 表示垂直偏移距离,其中 content 提示内容默认不是顶对齐,而是相对于镂空暴露的目标元素下边缘往上 5 像素对齐。

眼见为实,demo页面走起,您可以狠狠地点击这里: jQuery小插件jquery.guide.js使用demo

demo页面共设置了 4 个提示元素,相关JS使用如下:

<script src="./jquery.min.js"></script>
<script src="./jquery.guide.js"></script>
<script>
$.guide([{
  selector: '.logo',
  content: '<img src="guide-1.png">',
  align: 'left'
}, {
  selector: '.ad img',
  content: '<img src="guide-2.png">'
}, {
  selector: '#back',
  content: '<img src="guide-3.png">',
  align: 'left'
}, {
  selector: '.demo img',
  content: '<img src="guide-4.png">'
}]);
</script>

本demo页面为了演示方便,做了特殊处理,每次刷新都会显示提示效果。实际使用的时候是不会有这样的问题的,只会显示一次,无需担心。

澳门博发娱乐官网 5 

四、结束语

并不是什么了不起的东西,就不放在github上了,如果大家有幸捧场使用,遇到什么问题,欢迎评论的形式进行反馈。

一、有请jquery.guide.js 网站上线或者改版的时候,常常会做一个...

CSS

五、渐变色彩

      CSS3 Gradient 分为线性渐变(linear)和径向渐变(radial)。

  参数:

  澳门博发娱乐官网 6     

  用法:

  澳门博发娱乐官网 7

 六、 文字与字体

  text-overflow用来设置是否使用一个省略标记(...)标示对象内文本的溢出。

 七、文本阴影text-shadow

 八、1、(background-origin)设置元素背景图片的原始起始位置

          background-origin : border-box | padding-box | content-box;

      2、background-clip         用来将背景图片做适当的裁剪以适应实际需要。

    background-clip : border-box | padding-box | content-box | no-clip

  3、background-size    设置背景图片的大小,以长度值百分比显示,还可以通过covercontain来对图片进行伸缩。

    background-size: auto | <长度值> | <百分比> | cover | contain

    取值说明:

    1、auto:默认值,不改变背景图片的原始高度和宽度;

    2、<长度值>:成对出现如200px 50px,将背景图片宽高依次设置为前面两个值,当设置一个值时,将其作为图片宽度值来等比缩放

    3、<百分比>:0%~100%之间的任何值,将背景图片宽高依次设置为所在元素宽高乘以前面百分比得出的数值,当设置一个值时同上;

    4、cover:顾名思义为覆盖,即将背景图片等比缩放以填满整个容器

    5、contain:容纳,即将背景图片等比缩放至某一边紧贴容器边缘为止

  4、multiple backgrounds    

    .demo{
      width: 300px;
      height: 140px;
      border: 1px solid #999;

      background-image: url(),
      url(),
      url();
      background-position: left top, 120px 0, 230px 0;
      background-repeat: no-repeat, no-repeat, no-repeat;

      margin:0 0 20px 0;
    }

    

    .task {
      width: 300px;
      height: 140px;
      border: 1px solid #999;

      background:url() no-repeat left top/80% 40%,
      url() no-repeat right bottom/50% 50%;
    }

  九、 css3属性选择器

    1.属性选择器

         <style type="text/css">  

      a[class^=column]{

      background: red;
      color:#fff;
      }
      a[href$=doc]{
      background: green;;
      color:#fff;
      }
      a[title*=box]{
      background: blue;
      color: #fff;
      }
    </style>

    2.结构性伪类选择器—root()

      “:root”选择器等同于<html>元素,简单点说:

:root{background:orange}

html {background:orange;}

      得到的效果等同。

      建议使用:root方法。

    3.结构性伪类选择器—not

      给表单中除submit按钮之外的input元素添加红色边框,CSS代码可以写成:

      form { width: 200px; margin: 20px auto; }

      div { margin-bottom: 20px; }

      input:not([type="submit"]){ border:1px solid red; }

 

腾讯微云黑色遮罩引导蒙版更好的CSS实现方式

2016/03/08 · CSS · 1 评论 · 蒙版

原文出处: 张鑫旭(@张鑫旭 )   

这种提示比较好的交互效果是采用镂空的半透明遮罩,视觉重点一目了然,类似这样:

12345678910111213141516171819

.feather .image-wrap {position: relative;-webkit-border-radius: 30em;-moz-border-radius: 30em;border-radius: 30em;}.feather .image-wrap:after {position: absolute;content: ' ';width: 100%;height: 100%;top: 0;left: 0;background: -webkit-gradient(radial, 50% 50%, 50, 50% 50%, 70, from(rgba(255,255,255,0)), to(rgba(255,255,255,1)));background: -moz-radial-gradient(50% 50%, circle, rgba(255,255,255,0) 50px, rgba(255,255,255,1) 70px);}

CSS3是CSS2的升级版本,3只是版本号,它在CSS2.1的基础上增加了很多强大的新功能。 目前主流浏览器chrome、safari、firefox、opera、甚至360都已经支持了CSS3大部分功能了,IE10以后也开始全面支持CSS3了。在编写CSS3样式时,不同的浏览器可能需要不同的前缀。它表示该CSS属性或规则尚未成为W3C标准的一部分,是浏览器的私有属性,虽然目前较新版本的浏览器都是不需要前缀的,但为了更好的向前兼容前缀还是少不了的。

二、我的实现

主要在于思维方式的变化。拼积木这种想法大家都比较容易想到,符合日常认知,但是,但代码层面,我们可以进行思维转换,发散思考,偌大的半透明遮罩层,我们不要老想着背景色块背景色块,可以突破常规思维,把它认为是边框,一个很大很大的边框(我们平时使用border都是1像素巨多),这样,我们自然就有了镂空效果。

如下图示意:
澳门博发娱乐官网 8

但是,目前我们中间的镂空区域方的,有没有什么办法变成圆的呢?
自然有,方法1是元素设置超大圆角,但是,此时为了边框依然填满整个屏幕,border边框尺寸要大大增大,但是,为了不影响页面的滚动条,我们必须再嵌套一层标签,就显得啰嗦了;
方法2则是方法1某些方面的逆向思维处理,就是把当前元素作为外层限制标签,里面重新生成一个大尺寸伪元素,实现自适应尺寸的圆角效果,这个好,HTML干净不啰嗦,CSS一步到位(代码如下示意);

.cover::before { content: ''; width: 100%; height:100%; border-radius: 50%; border: 400px solid #000; position: absolute; left: -400px; top: -400px; /* 自己瞎填的参数,示意 */ box-shadow: inset 0 0 5px 2px rgba(0,0,0,.75); }

1
2
3
4
5
6
7
8
9
10
.cover::before {
    content: '';
    width: 100%; height:100%;
    border-radius: 50%;
    border: 400px solid #000;
    position: absolute;
    left: -400px; top: -400px;
    /* 自己瞎填的参数,示意 */
    box-shadow: inset 0 0 5px 2px rgba(0,0,0,.75);
}

大家可以看到,上面的伪元素的各个参数都是固定参数值,与外部元素的尺寸什么的没有任何关系,只要外部元素尺寸不超过400,里面永远会有一个正椭圆的内阴影的镂空图形(因为超出部分会被.cover隐藏),要理解圆角和正椭圆的关系,可以参考我之前的文章:“秋月何时了,CSS3 border-radius知多少?”。

眼见为实,耳听为虚,您可以狠狠地点击这里:一层标签实现网站引导镂空蒙版功能demo (点击黑色蒙层会有引导切换效果)

demo这个镂空蒙层所使用的HTML代码如下:

<div class="cover"/></div>

1
<div class="cover"/></div>

没错,就这么简单,没什么嵌套,没有什么五个元素变形金刚合体,没有使用图片。

微云这张图片3K多,以微云的用户访问量,估计流量费要不少钱的。

而且,大家如果点击蒙版,会发现,镂空的区域大小每次都是不一样的,有大有小,有高有瘦,而微云的那个实现方法要满足此需求就棘手;而且,大家发现没,这些尺寸位置的变化都是动画来动画去的,不是嗙嗙嗙这种生硬的效果,更soft, 对用户视觉引导效果更好,你看,我从这里到这里了,为什么可以实现动画效果呢,因为我们的镂空和内阴影都是CSS实现的,而微云的图片方法,显然是无法有动画的。

澳门博发娱乐官网 9

JS代码辅助
当然,我的实现也离不开JS的辅助,JS的工作很简单,让蒙层的width/height以及border大小和需要引导的元素相关联。

我特意整了个可以公用的方法coverGuide(命名不喜欢自己随便改):

var coverGuide = function(cover, target) { var body = document.body, doc = document.documentElement; if (cover & target) { // target size(width/height) var targetWidth = target.clientWidth, targetHeight = target.clientHeight; // page size var pageHeight = doc.scrollHeight, pageWidth = doc.scrollWidth; // offset of target var offsetTop = target.getBoundingClientRect().top + (body.scrollTop || doc.scrollTop), offsetLeft = target.getBoundingClientRect().left + (body.scrollLeft || doc.scrollLeft); // set size and border-width cover.style.width = targetWidth + 'px'; cover.style.height = targetHeight + 'px'; cover.style.borderWidth = offsetTop + 'px ' + (pageWidth - targetWidth - offsetLeft) + 'px ' + (pageHeight - targetHeight - offsetTop) + 'px ' + offsetLeft + 'px'; cover.style.display = 'block'; // resize if (!cover.isResizeBind) { if (window.addEventListener) { window.addEventListener('resize', function() { coverGuide(cover, target); }); cover.isResizeBind = true; } else if (window.attachEvent) { window.attachEvent('onresize', function() { coverGuide(cover, target); }); cover.isResizeBind = true; // IE7, IE8 box-shadow hack cover.innerHTML = ''; } } } };

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
var coverGuide = function(cover, target) {
    var body = document.body, doc = document.documentElement;
    if (cover & target) {
        // target size(width/height)
        var targetWidth = target.clientWidth,
            targetHeight = target.clientHeight;
 
        // page size
        var pageHeight = doc.scrollHeight,
            pageWidth = doc.scrollWidth;
 
        // offset of target    
        var offsetTop = target.getBoundingClientRect().top + (body.scrollTop || doc.scrollTop),
            offsetLeft = target.getBoundingClientRect().left + (body.scrollLeft || doc.scrollLeft);
 
        // set size and border-width
        cover.style.width = targetWidth + 'px';
        cover.style.height = targetHeight + 'px';    
        cover.style.borderWidth =
            offsetTop + 'px ' +
            (pageWidth - targetWidth - offsetLeft) + 'px ' +
            (pageHeight - targetHeight - offsetTop) + 'px ' +
            offsetLeft + 'px';
 
        cover.style.display = 'block';
 
        // resize
        if (!cover.isResizeBind) {
            if (window.addEventListener) {
                window.addEventListener('resize', function() {
                    coverGuide(cover, target);
                });    
                cover.isResizeBind = true;
            } else if (window.attachEvent) {
                window.attachEvent('onresize', function() {
                    coverGuide(cover, target);
                });
                cover.isResizeBind = true;
 
                // IE7, IE8 box-shadow hack
                cover.innerHTML = '';
            }
        }
    }
};

这里的coverGuide方法使用原生JS实现,IE6+浏览器都是兼容的,不依赖JS库,大家可以随意使用。当然,写得匆忙,没有严格验证,可能有bug,大家可以稍微留点心。

使用非常简单,语法如下:

coverGuide(cover, target);

1
coverGuide(cover, target);

其中cover就是.cover这个单独的蒙版元素,target则是我们需要指引的元素,按钮啊,导航什么的。然后,我们的镂空区域自动定位到target的位置,大小也是target元素的大小。超省心。

具体使用,可参考上面的demo,源代码就在页面上。

IE7,IE8怎么办
如果你需要兼容IE7,IE8,我们不妨就方框效果;如果设计和产品接受不了,则可以使用图片打个补丁,例如上面JS代码部分的:

cover.innerHTML = '<img src="guide-shadow.png">';

1
cover.innerHTML = '<img src="guide-shadow.png">';

我demo使用的这个图片长下面这样:
澳门博发娱乐官网 10

大小还有阴影都是我自己随手一搞的,旨在示意,真实项目大家可以向设计师索要图片。

然后,CSS超easy, 图片撑满我们的cover就可以。

/* IE7, IE8 img */ .cover > img { width: 100%; height: 100%; }

1
2
3
4
/* IE7, IE8 img */
.cover > img {
    width: 100%; height: 100%;    
}
.guide { outline: 9999px solid rgba;}

正如你看到的,你几乎可以使用:before和:after伪元素实现任何效果。如果你有用CSS3实现更多的创意图片效果,欢迎通过评论与大家分享。

一、圆角(border-radius)是向元素添加圆角边框。

      border-radius: 5px 4px 3px 2px; /* 四个半径值分别是左上角、右上角、右下角和左下角,顺时针 */ 

二、阴影 (box-shadow)

  box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];

  澳门博发娱乐官网 11

  注意:inset 可以写在参数的第一个或最后一个,其它位置是无效的。

  .box_shadow
    {   

             box-shadow:4px 2px 6px #333333 inset;   

           }

  添加多个阴影:

  以上的语法的介绍,就这么简单,如果添加多个阴影,只需用逗号隔开即可。如:

  .box_shadow{ box-shadow:3px 2px 5px #f00, -3px -2px 5px #000, 0px 0px 12px 5px #33CC00 inset; }

 

三、边框应用图片( border-image)

  border-image的语法:

  澳门博发娱乐官网 12

代码:

  #border_image {
    margin:0 auto;
    height:100px;
    line-height:100px;
    text-align:center;
    font-size:30px;
    width:450px;
    border:15px solid #ccc;
    border-image:url(images/1.jpg) 70 repeat;
  }
  <div id="border_image">
     请为我镶嵌上漂亮的画框吧
  </div>

四、颜色

      background-color:rgba(100,120,60,0.5);

三、结束语

这种蒙版覆盖思想呢,不仅仅适用于这种大面积的引导。我们上传图片,尤其上传头像之后,要对头像进行剪裁,常见的交互之一就是四周黑色,中间镂空,也可以使用巨大border来实现我们的效果,一层标签足矣,根本不需要上下左右额外4层标签拼接合体实现。

内部自适应的圆角效果单看文字,很多小伙伴估计不知道我在说些什么,建议去demo页面看下伪元素的代码,真实区域大小和最终效果,估计就会明白了。

感谢阅读,欢迎交流,欢迎提供更好的实现方法,一定有的,只是我功力不够。

以上~

澳门博发娱乐官网 13

相关文章

  • 小tip:CSS3下的圆形遮罩效果实现与应用 (0.604)
  • CSS3 box-shadow兼容loading效果兼IE10+ CSS Hack介绍 (0.396)
  • CSS3 box-shadow盒阴影图形生成技术 (0.396)
  • CSS border三角、圆角图形生成技术简介 (0.350)
  • CSS3图标图形生成技术个人攻略 (0.338)
  • 遐想:如果没有IE6和IE7浏览器… (0.286)
  • 伪元素表单控件默认样式重置与自定义大全 (0.286)
  • first-line伪类实现兼容IE6/IE7的单标签多背景效果 (0.286)
  • CSS计数器(序列数字字符自动递增)详解 (0.286)
  • CSS之before, after伪元素特性表现两则 (0.286)
  • CSS3/SVG clip-path路径剪裁遮罩属性简介 (RANDOM – 0.255)

    1 赞 2 收藏 1 评论

澳门博发娱乐官网 14

三、jquery.guide.js小插件的语法和使用

12345678910111213

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script><script type="text/javascript">$(document).ready(function(){$("img").load(function() {$(this).wrap(function(){return '<span class="image-wrap ' + $(this).attr('class') + '" style="position:relative; display:inline-block; background:url(' + $(this).attr('src') + ') no-repeat center center; width: ' + $(this).width() + 'px; height: ' + $(this).height() + 'px;" />';});$(this).css("opacity","0");});});</script>

CSS3给我们带来了什么好处呢?简单的说,CSS3把很多以前需要使用图片和脚本来实现的效果、甚至动画效果,只需要短短几行代码就能搞定。比如圆角,图片边框,文字阴影和盒阴影,过渡、动画等。

$.guide([{ selector: '.logo', content: '&lt;img src="guide-1.png"&gt;', align: 'left'}, { selector: '.ad img', content: '&lt;img src="guide-2.png"&gt;'}, { selector: '#back', content: '&lt;img src="guide-3.png"&gt;', align: 'left'}, { selector: '.demo img', content: '&lt;img src="guide-4.png"&gt;'}]);

同样只是inset box-shadow,我可以让它看起来像剪贴画。

前缀

浏览器

-webkit

chrome和safari

-moz

firefox

-ms

IE

-o

opera

 

最近正好有个改版项目有类似的需求,我要基于这个原理顺便整了一个jQuery插件,名为jquery.guide.js,专门用来实现黑色半透明遮罩镂空提示引导效果。

浮雕风格 (见 demo)

 

本demo页面为了演示方便,做了特殊处理,每次刷新都会显示提示效果。实际使用的时候是不会有这样的问题的,只会显示一次,无需担心。

软浮雕风格 (见 demo)

其中, options 为数组,数组项为格式一致的包含提示信息相关参数的对象,这个对象统一的默认值为:

变形和着色 (见 demo)

•selector 表示需要镂空暴露的目标元素的选择器,如果该选择器可以匹配多个元素,则使用该选择去匹配的第一个元素作为目标元素;如果无法匹配元素,则整个这个参数对象会被忽略。 •content 表示镂空区域内额外显示的内容,可以是HTML字符串,也可以是jQuery包装器对象。 •align 表示显示内容的对齐方式,是左对齐居中对齐还是右对齐?可选关键字值包括: left , center , right . 其中 center 是默认值。 •offset 表示偏移的水平垂直距离, x 那是水平偏移位置,计算规则与 align 参数值有关, y 表示垂直偏移距离,其中 content 提示内容默认不是顶对齐,而是相对于镂空暴露的目标元素下边缘往上 5 像素对齐。

浏览器支持

demo页面共设置了 4 个提示元素,相关JS使用如下:

先看下demo

实例demo地址: demo地址戳这里

通过一点儿改变,我可以将卡片风格转换为浮雕。。。

四、结束语

CSS

var defaults = { selector: '', content: '', align: 'center', offset: { x: 0, y: 0 }};

$.guide([{ selector: '#target'}]);

本文的方法可以在支持border-radius、box-shadow、:before和:after伪元素的浏览器上,比如Chrome/Safari/Firefox等,而在一些落后的浏览器比如IE9(包括IE9)则不能完全支持——IE6/7/8没有任何表现,IE9会有普通的圆角。

网站上线或者改版的时候,常常会做一个操作向导,告诉用户一些重要操作到了哪里,或者什么地方隐藏了什么好玩的东西,等等,虽然我都是直接关掉的,或者快速跳过,但是对有部分用户而言还是很有用的。

发光渐变遮罩是通过:after伪元素实现的。。。

正如源代码中的注释所言,如果想支持圆角,注释上面的 outline ,放开下面两行 box-shadow 和 border-radius 的注释就可以了。

上面的脚本将会输出下面的HTML代码:

然后,一些偷懒的地方:

倒影 (见 demo)

本文由胜博发-前端发布,转载请注明来源:就是使用CSS outline澳门博发娱乐官网: 属性,专