[css] 如何使用CSS3的属性设置模拟边框跟border效果一样？

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.box {width: 200px;height: 200px;background-color: #000;position: relative;}.box:after {content: '';width: 204px;height: 204px;background-color: red;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);z-index: -1;}</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>

个人简介

我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易，
但坚持一定很酷。欢迎大家一起讨论

主目录

与歌谣一起通关前端面试题

[css] 如何使用CSS3的属性设置模拟边框跟border效果一样？相关推荐

css中translation,css3 translate属性
translate(x,y)水平方向和垂直方向同时移动(也就是X轴和Y轴同时移动):translateX(x)仅水平方向移动(X轴移动):translateY(Y)仅垂直方向移动(Y轴移动)默认都是从 ...
CSS3 box-shadow属性设置阴影效果用法大全
CSS3 box-shadow 属性用来向边框添加一个或多个阴影效果,该属性是由逗号分隔的阴影列表,每个阴影由 2-4 个长度值.可选的颜色值以及可选的 inset 关键词来规定,省略长度的值是 0. ...
css中字体与段落属性设置/文本高级样式
CSS中字体与段落属性毫无疑问,不管什么网站,文字一定是必不可少.文字可以是网页传播信息的主要手段.那么怎么显示文字,才能更加的美观,那么大家需要了解以下文字属性. 字体属性属性用途语法(一些 ...
css3滤镜属性filter实现网页变黑白效果
前言在特殊的日子里,很多网站页面都是黑白色的,其实用css3滤镜属性filter让网页马上变黑白,一行代码就搞定. 网页变黑白代码实现方法1:在你的css里加上以下代码即可,网页马上变黑白: ht ...
Web前端学习记录——CSS3过渡属性+定位实现简单的动画效果
css3过渡属性: 属性描述 transition-property 检索或设置对象中的参与过渡的属性 transition-duration 检索或设置对象过渡的持续时间 transition-d ...
css inset默认值,测试CSS3 clip-path属性的不同inset值的效果
CSS 语言: CSSSCSS 确定 .test { float: left; overflow: hidden; position: relative; margin: .25em; height: ...
Border-radius属性--设置圆角边框
border-radius:该属性允许您为元素添加圆角边框! div {border:2px solid;border-radius:25px; -moz-border-radius:25px; /* ...
利用css的before和after属性，实现类似QQ对话框效果
实现效果如下: 前面的小三角形的原理是利用两个三角形,一个是黑色,一个白色,利用index属性,让白色的三角形覆盖黑色的三角形,白色三角形比黑色三角形靠右1px.下面是代码: <!DOCTYPE ...
【html/css】纯css3实现三角形以及带边框的三角形
图示代码如下 <!DOCTYPE html> <html lang="en"><head><meta charset="UTF ...

[css] 如何使用CSS3的属性设置模拟边框跟border效果一样？

[css] 如何使用CSS3的属性设置模拟边框跟border效果一样？

个人简介

主目录

[css] 如何使用CSS3的属性设置模拟边框跟border效果一样？相关推荐

最新文章

热门文章