css信封边框效果实现的2种方法
信封边框
信封描边的效果大致如下图所示，这里的边框有红白蓝三种颜色，所以可以使用重复线性渐变的方法来完成：
信封边框有两种实现思路：
1、使用背景渐变
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .uu{ width: 200px; height: 70px; padding:1em; border: 1em solid transparent; background: linear-gradient(white,white) padding-box,repeating-linear-gradient(-45deg, red 0, red 12.5%, transparent 0, transparent 25%, #58a 0, #58a 37.5%, transparent 0, transparent 50%) 0/5em 5em; } </style> </head> <body> <div class="uu"></div> </body> </html> 
2、使用边框图片
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .uu{ width: 200px; height: 70px; padding: 1em; border: 1em solid transparent; background: linear-gradient(white,white) padding-box,repeating-linear-gradient(-45deg, red 0, red 12.5%, transparent 0, transparent 25%, #58a 0, #58a 37.5%, transparent 0, transparent 50%) 0/5em 5em; } </style> </head> <body> <div class="uu"></div> </body> </html> 
本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。
微信扫码关注
更新实时通知