css定义边框,在css中怎么设置边框

一、多重边框[1]

　　背景知识：方框阴影、轮廓

　　鉴于使用场景的多样性，多边框的设计越来越多。在过去，我们可以使用border-image属性来处理它，但这在css代码级别上不是很灵活。现在我们使用框阴影和轮廓属性分别实现多个边界。

1、box-shadow 方案

　　思路：利用box-shadow的第四个参数(扩展半径)的大小，多重投影

　　代码示例：

　　Div= border-multiple 多边界实现方案1:box-shadow/div . border-multiple { margin:50pxauto；填充：20px宽度：600px背景色：# fffbox-shadow: 0 0 0 10px #f0f，0 0 0 15px #00f，0 2px 15px 15px rgba( 0，0，0， 8)；}

　　多边框-框-阴影

　　总结：

　　1.阴影不会影响布局，也不会受到框大小的影响。

　　2.支持逗号分隔语法，可以创建任意数量的投影。

　　3.缺点：只能实现实心边框，不能实现其他风格的边框。

2、outline 方案

　　代码示例：

　　Class= border-outline 多边界实现方案2:outline/div . border-outline { margin:200 pxauto；填充：20px宽度：600px背景色：# ff0轮廓：3px虚线# 0f0轮廓偏移：-10px；}

　　多边框--轮廓

　　总结：

　　1.前提是实现两层边界。

　　2.可能需要轮廓偏移的属性值。

　　3.轮廓的笔画默认为矩形。有圆角的时候会被认为是bug，装不下圆角。

　　4.不支持逗号语法。

二、边框内圆角[2]

　　背景知识：方框阴影、轮廓

　　要解决上述示例摘要3中的错误，您可以使用框阴影扩展半径来填充圆角和轮廓之间的间隙。

　　代码示例：

　　Div= inner-rounding 需要借助框影、轮廓和“多重边框”来实现注意：框影的展开半径应该是圆角半径的0.5倍/div . inner-rounding { background-color:# CCC；边距：50px自动；填充：20px宽度：600px填充：20px边框半径：20pxbox-shadow:0 0 0 10px # f00；大纲：10px固体# f00}注意：盒形阴影的扩展半径应为圆角的0.5倍；严格来说应该是(2-1)倍。这里取0.5倍是为了更好的计算。

　　边框圆角

三、半透明边框[3]

　　背景知识：rgba或hsla颜色属性、背景剪辑

　　想法：让边框出现在带有裁剪背景的填充框中。

　　代码示例：

　　半透明边框/div.border-opacity的实现{ margin:50pxauto；填充：20px宽度：600px边框：10px固体hsla(0，0%，100%，0.5)；背景色：# fff背景剪辑：填充框；}摘要：

　　半透明边框的实现需要css3的背景剪辑属性。

　　背景剪辑有三个属性：

　　1.边框框：背景被裁剪为边框框(看不到边框)

　　2.填充框：背景被裁剪到内边距框(可以看到边框)

　　3.内容框：背景被裁剪到内容框(边框靠近内容)

　　半透明边框效果图

四、连续的图像边框[4]

　　背景知识：css渐变，基本边框图像，背景剪辑

　　让我们先来看看border-image是如何实现图像边框的：

　　border-image的实现原理是九宫格展开法：将图片剪成九块，然后分别应用到元素边框对应的边和角上。

　　代码示例：

　　 border-image Border-image是通过九宫格展开法实现的：将图片剪成九块，然后分别应用到元素边框对应的边和角上。/p p class=border-image 我们不希望图片的某个特定部分固定在拐角处；相反，您希望出现在角上的图像区域会随着边框的宽度、高度和厚度而变化。/p .border-image { border: 40px纯色透明；border-image:33.334% URL( http://CSS secrets . io/images/stone-art . jpg )；填充：1em最大宽度：20em字体：130%/1.6巴斯克维尔，帕拉蒂诺，衬线；} .border-image:n-child(2){ margin-top:1em；边框-图像-重复：圆形；}

　　边界图像渲染

　　缺点：我们不希望画面的某个特定部分固定在角落；相反，您希望出现在角上的图像区域会随着边框的宽度、高度和厚度而变化。

　　怎么解决？

　　实施思路：

　　1.使用css渐变和背景扩展。

　　2.在背景图片上叠加一层纯白的纯色背景。

　　3.为了通过边界区域显示较低的背景，有必要为两层背景指定不同的背景剪辑值。

　　4.在多个背景的底部设置背景色，需要一个由白到白的css渐变，来模拟纯白纯色背景的效果。

　　代码示例：

　　“当代图像”的实施思路：1 .使用css渐变和背景扩展；2.在背景图片上叠加一层纯白的纯色背景；3.为了通过边界区域显示较低的背景，您需要为两层背景指定不同的背景剪辑值；4.设置多个背景底部的背景颜色。需要从白色到白色的css渐变来模拟纯白和纯色背景的效果。边框：1em纯色透明；/*背景：线性-渐变(白色，白色)，URL(http://CSS secrets . io/images/stone-art . jpg)；背景-尺寸：封面；背景剪辑：填充框、边框；背景-原点：边框-盒子；*//* background也可以缩写如下*/background: linear-gradient(白色，白色)padding-box，URL(http://csssecrets.io/images/stone-art.jpg)border-box 0/cover；宽度：21em填充：1em溢出：隐藏；/*边框可以拖动*/resize:both；字体：100%/1.6巴斯克维尔，帕拉蒂诺，衬线；}

　　连续图像边框

　　您还可以使用渐变图案实现信封样式的边框。

　　代码示例

　　您还可以使用渐变图案实现信封样式的边框。

　　Class= envelope-border 还可以通过渐变图案/p . envelope-border { padding:1em；边框：0.5em纯色透明；背景：线性渐变(白色，白色)填充框，重复线性渐变(-45度，红色0，红色12.5%，透明0，透明25%，#58a 0，#58a 37.5%，透明0，透明50%)0/3em 3em；最大宽度：20em字体：100%/1.6巴斯克维尔，帕拉蒂诺，衬线；}

　　信封边框效果图

　　关于在css中实现各种边界的技巧，这篇文章就讲到这里。更多相关css边框，请搜索以前的文章或者继续浏览下面的相关文章。希望你以后能支持我！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。