美文网首页
CSS如何实现0.5像素

CSS如何实现0.5像素

作者: 烟雨遥书生 | 来源:发表于2018-01-20 20:26 被阅读0次

&:after {

content:"";

position:absolute;

bottom:0;

left:0;

width:200%;

height:1px;

background-color:#E5E5E5;

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

}

&:before{

content:"";

position:absolute;

top:0;

left:0;

width:200%;

height:200%;

border-radius:8px;

border:solid #db4840 1px;

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

}

相关文章

  • Front-web 启示录

    Q: 如何实现下图效果? A: Html Css Q: 如何实现下图导航栏效果? A: html Css Q: 如...

  • CSS 技巧

    1、css ul li 如何实现 横向排列

  • 强大的CSS:3种姿势实现26个英文字母的案例

    一、借助CSS border实现案例 实现效果如下(为实时渲染效果): 如何使用? 引用CSS文件,例如: 或者直...

  • 一些基础的前端面试题

    块级,行内,空元素如何表示 css盒子模型是什么 javascript的基础数据类型有哪些 用css如何实现垂直居...

  • 前端面试题

    一、css 1.如何实现文字环绕图片? 答:把图片设置为浮动 2.如何使用css图片精灵图? 答:使用backgr...

  • grid实现响应式布局

    一行 CSS 代码实现响应式布局 – 使用 Grid 实现的响应式布局 在这篇文章中,我将教你如何使用 CSS G...

  • 随手收集

    one div实现icon one div 实现动态天气 css实现文字3D CSS实现文本干扰效果 CSS实现文...

  • css实现input聚焦底部边框动态

    记录,如何用纯css实现input聚焦失焦的底部边框动态。实现效果: 具体实现:下面是具体实现代码,关于原理可以看...

  • 60s倒计时

    JS实现 html js css vue实现 html js css

  • CSS布局

    HTML CSS + DIV实现整体布局必备知识利用HTML和CSS实现常见的布局 单列布局 css 实现竖直居中...

网友评论

      本文标题:CSS如何实现0.5像素

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