美文网首页
box-shadow和outline

box-shadow和outline

作者: LorryZ | 来源:发表于2017-03-10 22:28 被阅读0次

    http://dabblet.com/gist/525eb8e9cdade71723c1

    可以利用box-shadow创建多层边框,

    box-shadow:0 0 0 15px #655, //第一层边框 

                         0 0 0 25px deeppink,   //第二层边框       

                         0 2px 5px 25px rgba(0,0,0,.6); //在最外层增加阴影

    background:yellowgreen;

    border:10px solid #655;

    outline:5px solid deeppink;//用一层Border一层outline可以实现相同的效果

    其中如果设定outline-offset属性,可以设定简单的描边效果,

    background:yellowgreen;

    outline:1px dashed deeppink;

    outline-offset:-10px; //内部描边效果

    相关文章

      网友评论

          本文标题:box-shadow和outline

          本文链接:https://www.haomeiwen.com/subject/bywogttx.html