《css揭秘》读后感1-边框的玩法

前端入坑纪 68

有时候发现想分享东西的时候，却想不出该写些什么。近期就重读这本书，顺带摘录一些东西出来，与众分享。感兴趣想阅读详细内容的话，大家可以去买来看看，还是很值得的！

1.边框的多种写法

// 正常的一个边框
border：1px solid #ccc;
// 投影也可画边框
box-shadow:0 0 0 6px #ccc
//描边也可画边框
outline:3px solid #ccc

所以将它们相互结合，就可以作出各种想要的边框了

// 半透明边框，投影边框，内嵌outline边框
            height: 220px;
            width: 330px;
            margin: 30px auto;
            outline: 4px dotted black;
            outline-offset: -33px;
            border: 17px solid rgba(105, 212, 212, 0.3);
            border-radius: 12px;
            box-shadow: 0 0 0 16px #ccc;
            background:url(https://ws3.sinaimg.cn/large/005BYqpgly1g1kgrq1ywxj30qs0sgdll.jpg);
            background-clip: padding-box

总结

好了，到此，本文告一段落！感谢您的阅读！祝你身体健康，阖家幸福！

*****作者原创内容,大家互相支持,谢谢!!!*****

打开支付宝首页搜 625097528 领红包，领到大红包的小伙伴赶紧使用哦！

支持你我，扫一扫红包