html多重边框，中间空白,CSS实现多重边框

实现这样的效果简单

Paste_Image.png

.box {

width: 150px;

display: flex;

justify-content: center;

align-items: center;

height: 200px;

background-color: lightskyblue;

border: 20px solid royalblue;

}

box

但要实现这样的效果，不包裹div的前提下，使用outline属性

Paste_Image.png

.box {

width: 150px;

display: flex;

justify-content: center;

align-items: center;

height: 200px;

background-color: lightskyblue;

border: 20px solid royalblue;

outline: solid 20px brown;

}

但要实现这样的效果 outline 是不行的

Paste_Image.png

如果使用 outline 只会这样

.box {

width: 150px;

display: flex;

justify-content: center;

align-items: center;

height: 200px;

background-color: lightskyblue;

border: 20px solid royalblue;

border-radius: 30px;

outline: solid 20px brown;

}

Paste_Image.png

但是用阴影 box-shadow 可以做到就像这样

.box {

width: 150px;

display: flex;

justify-content: center;

align-items: center;

height: 200px;

background-color: lightskyblue;

border: 20px solid royalblue;

border-radius: 30px;

box-shadow: 0 0 0 20px brown;

}

Paste_Image.png

还能这样

.box {

width: 150px;

display: flex;

justify-content: center;

align-items: center;

height: 200px;

background-color: lightskyblue;

border: 20px solid royalblue;

border-radius: 30px;

box-shadow: 0 0 0 20px brown,

0 0 0 40px salmon,

0 0 0 60px crimson;

}

Paste_Image.png

html多重边框，中间空白,CSS实现多重边框相关推荐

html圆角边框背景颜色,CSS之圆角边框渐变的实现
注:测试浏览器版本号--chrome 75.0.3770.80:opera 60.0.3255.109:firefox 67.0:ie 11. 对于普通的边框渐变,其作用于圆角边框渐变时会覆盖掉圆角的 ...
css边框实现高度,CSS上的边框高度
12 个答案: 答案 0 :(得分:60) 我有另一种可能性.这当然是一种"更新"的技术,但对我的项目来说已经足够了. 只有在需要一个或两个边框时才有效.我从来没有用4个边界做过. ...
html文字边框环绕,使用css的文本边框(围绕文本的边框)
使用多个文字阴影: text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 1px 1px #fff, -1px ...
html多重边框，中间空白,【基础】CSS实现多重边框的5种方式
原文:[基础]CSS实现多重边框的5种方式简言目前最优雅地实现多重边框的方案是利用CSS3 的 box-shadow属性,但如果要兼容老的浏览器,则需要选择其它的方案.本文简要地列举了几种多重边框 ...
【基础】CSS实现多重边框的5种方式
原文:[基础]CSS实现多重边框的5种方式简言目前最优雅地实现多重边框的方案是利用CSS3 的 box-shadow属性,但如果要兼容老的浏览器,则需要选择其它的方案.本文简要地列举了几种多重边框 ...
css 中多种边框的实现小窍门
背景知识:box-shadow,outline 鉴于使用场景的多元化,多重边框的设计越来越多,以往可以借助 border-image 属性应付一下,但是这个在css 代码层面并不是很灵活.现在我们借助 ...
html边框复合属性,详解CSS的border边框属性及其在CSS3中的新特性
基础你可能很熟悉边的最基本用法. CSS Code复制内容到剪贴板 border:1pxsolidblack; 上面的代码将给元素应用1px的边.即简洁又简单:但我们也可以稍作修改. CSS Code ...
css样式之边框和内外边距
1.css样式之边框:border 实心的边框: <!DOCTYPE html> <html> <head> <meta http-equiv="c ...
html边框绕着图片,CSS 边框
CSS 边框在 HTML 中,我们使用表格来创建文本周围的边框,但是通过使用 CSS 边框属性,我们可以创建出效果出色的边框,并且可以应用于任何元素. 元素外边距内就是元素的的边框 (border) ...

html多重边框，中间空白,CSS实现多重边框

html多重边框，中间空白,CSS实现多重边框相关推荐

最新文章

热门文章