CSS3如何实现0.5边框
生活随笔
收集整理的這篇文章主要介紹了
CSS3如何实现0.5边框
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
1.目標元素定位
2.給目標元素添加一個偽類設置定位,并添加絕對定位
3.給偽類設置1border,并放大寬高2倍
3.縮小0.5倍變回原大小,border包起來
具體代碼如下:
.thinner-border {position: relative; }.thinner-border:before {content: '';position: absolute;width: 200%;height: 200%;border: 1px solid #000;-webkit-transform-origin: 0 0;-moz-transform-origin: 0 0;-ms-transform-origin: 0 0;-o-transform-origin: 0 0;transform-origin: 0 0;-webkit-transform: scale(0.5, 0.5);-ms-transform: scale(0.5, 0.5);-o-transform: scale(0.5, 0.5);transform: scale(0.5, 0.5);-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box; }
2.給目標元素添加一個偽類設置定位,并添加絕對定位
3.給偽類設置1border,并放大寬高2倍
3.縮小0.5倍變回原大小,border包起來
具體代碼如下:
.thinner-border {position: relative; }.thinner-border:before {content: '';position: absolute;width: 200%;height: 200%;border: 1px solid #000;-webkit-transform-origin: 0 0;-moz-transform-origin: 0 0;-ms-transform-origin: 0 0;-o-transform-origin: 0 0;transform-origin: 0 0;-webkit-transform: scale(0.5, 0.5);-ms-transform: scale(0.5, 0.5);-o-transform: scale(0.5, 0.5);transform: scale(0.5, 0.5);-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box; }
?
轉載于:https://www.cnblogs.com/z-dl/p/8601560.html
總結
以上是生活随笔為你收集整理的CSS3如何实现0.5边框的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 页面金额显示两位小数点问题
- 下一篇: Replicate(网络复制),Acto