整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线：

CSS设置边框的几个技巧

置边框最常使用border，比如这样：

border: 1px dashed #333;

这是最常规的方法了，今天再来说说其他两种方法，

  1. outline方式
  2. background方式

outline方法

这也算是一种比较常规的方法了，

outline: 1px solid;

但需要注意的是，outline是在容器的最外部，与border的渲染还是有点区别的，同时对比下：

border: 1px dashed #333;
outline: 1px solid;

外部实线是outline，内部虚线是border，为了一致，可以设置outline-offset往内缩一点：

outline-offset: -1px;

background方法

这是本文的重点，我也是刚get到此项技能，之前一直不知道background居然如此强大，直接上代码：

background: linear-gradient(90deg, #333 50%, transparent 0) repeat-x 0 0px/9px 1px, #ffffff;

这里我们只设置了上面看，而且还是虚线的，做一说明这种方式的强大，再把其他边框补上去：

background: 
		linear-gradient(90deg, #333 50%, transparent 0) repeat-x 0 0px/9px 1px,
    linear-gradient(90deg, #333 50%, transparent 0) repeat-x 0 100%/9px 1px,
    linear-gradient(0deg, #333 50%, transparent 0) repeat-y 0 0/1px 9px,
    linear-gradient(0deg, #333 50%, transparent 0) repeat-y 100% 0px/1px 9px,
    #ffffff;

可见，使用background非常的灵活，边框的位置可以任意调整。

现在我们已经掌握这几方式，但本文的重点是上面这种，我们现在来动手操练下：

渐变边框

background: linear-gradient(90deg, #29bdd9 0%, #276ace 100%) repeat-x 0 0/100% 5px
    ,
    linear-gradient(-90deg, #29bdd9 0%, #276ace 100%) repeat-x 0 100%/100% 4px,
    linear-gradient(180deg, #29bdd9 0%, #276ace 100%) repeat-y 0 0/4px 100%,
    linear-gradient(0deg, #29bdd9 0%, #276ace 100%) repeat-y 100% 0/4px 100%,
    #eee;

滚动虚线边框

.box {
  background:
     linear-gradient(90deg, #333 50%, transparent 0) repeat-x,
     linear-gradient(90deg, #333 50%, transparent 0) repeat-x,
     linear-gradient(0deg, #333 50%, transparent 0) repeat-y,
     linear-gradient(0deg, #333 50%, transparent 0) repeat-y;
     background-size: 4px 1px, 4px 1px, 1px 4px, 1px 4px;
     background-position: 0 0, 0 100%, 0 0, 100% 0;
}

.box:hover {
  animation: linearGradientMove .3s infinite linear;
}

@keyframes linearGradientMove {
    100% {
        background-position: 4px 0, -4px 100%, 0 -4px, 100% 4px;
    }
}

滚动渐变

.box {
  background:
     linear-gradient(90deg, #FF8235,#30E8BF, #FF8235) repeat-x,
     linear-gradient(90deg, #FF8235,#30E8BF, #FF8235) repeat-x,
     linear-gradient(0deg, #FF8235,#30E8BF, #FF8235)  repeat-y,
     linear-gradient(0deg, #FF8235,#30E8BF, #FF8235)  repeat-y;
     background-size: 100% 8px, 100% 8px, 8px 100%, 8px 100%;
     background-position: 0 0, 0 100%, 0 0, 100% 0;
}

.box:hover {
  animation: linearGradientMove 1s infinite linear;
}

@keyframes linearGradientMove {
    100% {
        background-position: 200px 0, -200px 100%, 0 -200px, 100% 100px;
    }
}

以上就是设置边框的几个小技巧。

参考：
https://www.cnblogs.com/coco1s/p/14291567.html

order 盒子边框

复合属性。设置对象边框的特性。

盒子边框三要素：

① 边框粗细

② 边框样式

③ 边框颜色

语法：border: border-width | border-style | border-color ;

边框四边的粗细、样式、颜色，以及上下左右每个位置的样式属性都是可以单独调整的。

边框的颜色不是必要的，如果不指定颜色，默认颜色为黑色，但必须为盒子指定宽高。


初始 HTML

 <!DOCTYPE html>
 <html>
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
     <style>
         div{
             width: 500px;
             height: 50px;
         }
     </style>
 </head>
 <body>
     <div></div>
 </body>
 </html>



边框样式

使用 border-style 可为盒子边框设置样式，以下示例为实线

 /* CSS代码 */
 div{
     width: 500px;
     height: 50px;
     border-style: solid; 
 }

效果：


可单独针对某一方向设置边框样式

示例 CSS 代码

  • 上边：border-top-style: double; （双线）
  • 右边：border-right-style: solid; (实线)
  • 下边：border-bottom-style: dashed; (虚线)
  • 左边：border-left-style: dotted; (点线)


border-style 说明

  • 如果提供全部四个参数值，将按上、右、下、左的顺序作用于四边。
  • 如果只提供一个，将用于全部的四边。
  • 如果提供两个，第一个用于上、下，第二个用于左、右。
  • 如果提供三个，第一个用于上，第二个用于左、右，第三个用于下。
  • 如果border-width等于0，本属性将失去作用。

如果需要设置不同方向的样式属性，可以写在一句 CSS 代码里，比如说下面这段代码，上下实线，左右虚线。

 /* CSS代码 */
 div{
     width: 500px;
     height: 50px;
     border-style: solid dashed;
 }

效果：


border-style 样式属性值

属性值解释none无轮廓。 border-color将被忽略，border-width计算值为0，除非边框轮廓为图像，即border-image。hidden隐藏边框。IE7及以下尚不支持dotted点状轮廓。IE6下显示为dashed效果dashed虚线轮廓solid实线轮廓double双线轮廓。两条单线与其间隔的和等于指定的border-width值groove3D凹槽轮廓ridge3D凸槽轮廓inset3D凹边轮廓outset3D凸边轮廓



边框粗细

使用 border-width 可为盒子边框设置粗细，以下示例边框为 5px 粗细

 /* CSS代码 */
 div{
     width: 500px;
     height: 50px;
     border-style: solid;
     border-width: 5px;
 }

效果


可单独针对某一方向设置边框粗细

示例 CSS 代码

  • 上边：border-top-width: 10px; （双线）
  • 右边：border-right-width: 10px; (实线)
  • 下边：border-bottom-width: 10px; (虚线)
  • 左边：border-left-width: 10px; (点线)


border-width 说明

  • 如果提供全部四个参数值，将按上、右、下、左的顺序作用于四边。
  • 如果只提供一个，将用于全部的四边。
  • 如果提供两个，第一个用于上、下，第二个用于左、右。
  • 如果提供三个，第一个用于上，第二个用于左、右，第三个用于下。
  • 如果border-style设置为none或hidden，border-width的使用值将为0。

如果需要设置不同方向的边框粗细，可以写在一句 CSS 代码里。

比如说下面这段代码，上下2px，右2px，左5px。

 /* CSS代码 */
 div{
     width: 500px;
     height: 50px;
     border-style: solid;
     border-width:2px 2px 2px 5px;
 }

效果：



边框颜色

可直接输入

颜色的英文名称

rgb值

十六进制

使用 border-color 可为盒子边框设置颜色，以下示例边框颜色为红色。

 /* CSS代码 */
 div{
     width: 500px;
     height: 50px;
     border-style: solid;
     border-width:2px 2px 2px 5px;
     border-color: red;
 }

效果：


可单独针对某一方向设置边框颜色

示例 CSS 代码

  • 上边：border-top-color: 10px;
  • 右边：border-right-color: 10px;
  • 下边：border-bottom-color: 10px;
  • 左边：border-left-color: 10px;


border-color 说明

  • 如果提供全部四个参数值，将按上、右、下、左的顺序作用于四边。
  • 如果只提供一个，将用于全部的四边。
  • 如果提供两个，第一个用于上、下，第二个用于左、右。
  • 如果提供三个，第一个用于上，第二个用于左、右，第三个用于下。
  • 如果border-width等于0或border-style设置为none，本属性将被忽略。

上面有两个示例讲述如何设置不同方向的属性，border-color 也是相同使用方法，此处就不做示例了。



border 是复合属性

如果你需要同时设置盒子的粗细、样式、颜色，那么你可以将他们的样式表写在同一行代码里。

例如：

 /* CSS代码 */
 div{
     border-top: 5px solid red;
 }

这段代码指定了上边框的三个属性：粗细、样式、颜色

border-top 包含了：

  • border-top-width: 5px;
  • border-top-style: solid;
  • border-top-color: red;

其他同理



教你用 CSS 画个三角形

先来看一个示例

 /* CSS代码 */
 div{
     width: 100px;
     height: 100px;
     border-top: 50px solid red;
     border-right: 50px solid blue;
     border-bottom: 50px solid green;
     border-left: 50px solid pink;
 }

效果：

细心的你，一定发现了 border 的边框四条边交接处是斜角。


此刻我们把盒子的宽高设置为 0

 /* CSS代码 */
 div{
     width: 0;
     height: 0;
     border-top: 50px solid red;
     border-right: 50px solid blue;
     border-bottom: 50px solid green;
     border-left: 50px solid pink;
 }

效果：

是不是完完全全像四个三角形一样。

我们只需要把上边和左右两边的三角形隐藏起来，它不就是一个三角形了。

为 border-color 指定 transparent 值，使盒子边框颜色变透明

 /* CSS代码 */
 div{
     width: 0;
     height: 0;
     border-top: 50px solid transparent;
     border-right: 50px solid transparent;
     border-bottom: 50px solid green;
     border-left: 50px solid transparent;
 }

效果：

把另外三条边透明之后，就只剩一个三角形了。


完


部分资料引用自：

  • http://caibaojian.com/css3/properties/border/index.htm

素的边框 (border) 是围绕元素内容和内边距的一条或多条线。

CSS border 属性允许你规定元素边框的样式、宽度和颜色。

边框样式

border-style属性用来定义边框的样式。

border-style的值：



（1）编辑代码

打开记事本，编写其代码，并保存为HTML格式文件。代码如下。


（2)在浏览器中浏览效果

在浏览器中浏览效果如图所示。


在线咨询
上一篇：把HTML网页下载为单文件，可离线访问
下一篇：为HTML页面添加视频、音频的方法-零基础自学网页制作

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

推荐阅读
友情链接 惠农区 苏家屯区 偃师市 郴州 南通 泗县 网站制作
Copyright © 2002-2019 雨点网络设计有限公司 版权所有   冀ICP备11025394号
联系电话：   E-mail：279303980@qq.com  
主营业务：技术文章网站建设、网站定制、技术文章营销型网站建设、技术文章网站优化、技术文章微商城制作、三级分销系统开发
电话沟通
在线客服