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;
}

转载于:https://www.cnblogs.com/z-dl/p/8601560.html

CSS3如何实现0.5边框相关推荐

css3实现0.5px边框、圆角渐变色边框+圆角渐变色背景
效果图 0.5px边框 0.5px边框,可以用伪元素实现,before.after都可以.移动端H5页面用的比较多. 圆角渐变色边框+圆角渐变色背景实现外部圆角边框,内部圆角渐变色背景,是用父div ...
[css] 如何使用CSS3的属性设置模拟边框跟border效果一样？
[css] 如何使用CSS3的属性设置模拟边框跟border效果一样? <!DOCTYPE html> <html lang="en"> <head& ...
CSS实现0.5px的线 0.5rpxborder边框
1.0.5px的线核心代码就是通过transfrom的scaleY属性,溢出隐藏掉就可以了 // html <div class="line"></div> ...
html5添加渐变边框效果,《CSS3揭秘》上（边框，投影，渐变，条纹效果，蚂蚁行军）...
最近看了<css3揭秘>一书,里面真的是干货满满呀,现将常用到的一些技巧归纳总结,便于日后用到查找.不得不感叹学无止境哦~ 1.边框与背景半透明边框 .demo{ background- ...
html锯齿边框,css3制作邮票（锯齿边框）-css3制作邮票（锯齿边框）-HTML5+CSS3-编玩编学- 注重积累的过程快速锁定问题解决问题写博客，在积累源码,持续更新技术博客,加分项...
css3制作邮票(锯齿边框) html: css: body,h1,h2,h3,h4,ul,li,div,a,p{ margin: 0; padding: 0; font-family: arial; ...
CSS3中（border-radius）边框圆角详解
传统的圆角生成方案,必须使用多张图片作为背景图案.CSS3的出现,使得我们再也不必浪费时间去制作这些图片了,只需要border-radius属性,支持浏览器IE 9.Opera 10.5.Safari ...
[转]retina屏下支持0.5px边框的情况
2014-12-31更新: 截至到IOS8.1,safari仍不支持@supports 待safari支持@supports, 就可以利用0.5px了! 2014-7-25更新: 1. 修正dpr = ...
div背景透明_为什么css3实现background-image和半透明边框这么麻烦
"background和border属性能有什么难的?" 我经常听到新手觉得css的background和border属性简单. 那好,我们来看下面这个比较"简单&quo ...
div背景透明内容不透明与0.5PX边框兼容设置
1.问题:设置 border-width:0.5px; 并兼容安卓和苹果移动端. 兼容:苹果IOS的 safari 支持浮点数边框,安卓浏览器不支持,会四舍五入到1px.不同浏览器效果额不同解 ...

CSS3如何实现0.5边框

CSS3如何实现0.5边框相关推荐

最新文章

热门文章