html container显示边框,伪元素实现边框设置.html

@charset "utf-8";

/* CSS Document */

* {

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box

}

body {

padding: 0px;

margin: 0px;

color: #222;

font-family: "微软雅黑";

}

body {

background-size: cover;

color: #666;

padding-bottom: 30px;

font-size: .1rem;

}

li {

list-style-type: none;

}

table {}

i {

margin: 0px;

padding: 0px;

text-indent: 0px;

}

img {

border: none;

max-width: 100%;

}

a {

text-decoration: none;

color: #399bff;

}

a.active,

a:focus {

outline: none !important;

text-decoration: none;

}

ol,

ul,

h1,

h2,

h3,

h4,

h5,

h6 {

padding: 0;

margin: 0

}

.barbox {

width: 200px;

height: 200px;

background: #006600;

position: absolute;

top: 200px;

left: 200px;

}

.containerOne:before,

.containerOne:after {

position: absolute;

width: 20px;

height: 20px;

content: "";

}

.border-top-left:before {

border-left: 2px solid #02a6b5;

left: 0;

top: 0;

border-top: 2px solid #02a6b5;

}

.border-bottom-left:before {

border-left: 2px solid #02a6b5;

left: 0;

bottom: 0;

border-bottom: 2px solid #02a6b5;

}

.border-top-right:after {

border-top: 2px solid #02a6b5;

right: 0;

top: 0;

border-right: 2px solid #02a6b5;

}

.border-bottom-right:after {

border-right: 2px solid #02a6b5;

right: 0;

bottom: 0;

border-bottom: 2px solid #02a6b5;

}

一键复制

编辑

Web IDE

原始数据

按行查看

历史

html container显示边框,伪元素实现边框设置.html相关推荐

【读书笔记】《CSS3艺术：网页设计案例实战》——【一】伪元素、边框、背景属性
文章目录第2章伪元素 2.1 ::before和::after伪元素[^eg1] 2.2 content属性[^eg2] 2.3 灵活使用伪元素 2.3.1 用伪元素拼接造型[^eg3] 2.3. ...
html+在ul中加边框,为元素添加边框，你有多少种好办法？
本文作者:IMWeb 莫卓颖未经同意,禁止转载背景相信大家在做项目的过程中会经常遇到这样的一个需求,鼠标hover到某个元素的时候为这个元素添加边框,这个简单的需求仅需注意添加边框后不会对原有的 ...
使用伪元素给超链接设置自定义下划线
相信你和我一样对如何给超链接设置自定义下划线充满兴趣,如何设置下图这样的下划线呢? 废话不多说,下面直接上代码 .nav .router-link-exact-active{position: rel ...
在元素前面添加一个伪元素下边框
dd:hover:before {content: "";position: absolute;left: 0;right: 0;bottom: 0;width: 32px;hei ...
css文字背景虚化,通过实现背景模糊、文字颜色流光渐变、边框扩展等效果学习transition、transform、@keyframes等属性及伪元素的使用...
百度前端技术学院2017于2月24日开始进行,一共有6个学院可供学习,分别是小薇学院(html/css基础).斌斌学院(js基础).耀耀学院(小游戏/交互).商业平台学院(web/ios/androi ...
【CSS进阶】巧用伪元素before和after制作绚丽效果
原创:叫我詹躲躲来源:掘金链接:巧用伪元素before和after制作绚丽效果所谓'伪元素',就是本身不存在的页面元素,HTML代码里并没有这样的元素,但在页面显示时,你却能看到这些本来不存在的 ...
伪元素使用详解（超详细版）
1. :after ::after 单双引号的区别其实无论是单引号还是双引号,他们的本质都是伪元素,只不过因为伪类使用的也是单引号,同时他们的写法类似,写法也相仿,但实际上 css3 为了区分两者, ...
html 伪元素放入标签,CSS中的before和:after伪元素使用详解
如果你一直密切关注着各种网页设计的博客,你可能已经注意到了:before和:after伪元素已经在前端开发中获得了相当多的关注.特别是在Nicolas Gallagher的博客中,后期运用了很多伪类元 ...
div 设置 hover时边框颜色_CSS 奇思妙想边框动画
border 属性谈到边框,首先会想到 border,我们最常用的莫过于 solid,dashed,上图中便出现了 dashed. 除了最常见的 solid,dashed,CSS border 还支 ...

html container显示边框,伪元素实现边框设置.html

html container显示边框,伪元素实现边框设置.html相关推荐

最新文章

热门文章