一文教你玩转CSS border(边框)_CSS教程_CSS_网页制作

来源:脚本之家  责任编辑:小易  

边框样式

边框样式属性指定要显示什么样的边界。

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

border-style的值 代码演示:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>水香木鱼的博客</title>

    <style>
        p.none {
            border-style: none;
        }

        p.dotted {
            border-style: dotted;
        }

        p.dashed {
            border-style: dashed;
        }

        p.solid {
            border-style: solid;
        }

        p.double {
            border-style: double;
        }

        p.groove {
            border-style: groove;
        }

        p.ridge {
            border-style: ridge;
        }

        p.inset {
            border-style: inset;
        }

        p.outset {
            border-style: outset;
        }

        p.hidden {
            border-style: hidden;
        }
    </style>


</head>

<body>

    <div>
        <p class="none">无边框。</p>
        <p class="dotted">虚线边框。</p>
        <p class="dashed">虚线边框。</p>
        <p class="solid">实线边框。</p>
        <p class="double">双边框。</p>
        <p class="groove"> 凹槽边框。</p>
        <p class="ridge">垄状边框。</p>
        <p class="inset">嵌入边框。</p>
        <p class="outset">外凸边框。</p>
        <p class="hidden">隐藏边框。</p>
    </div>
</body>

</html>

效果演示:

边框宽度

您可以通过 border-width 属性为边框指定宽度。

为边框指定宽度有两种方法:可以指定长度值,比如 2px 或 0.1em(单位为 px, pt, cm, em 等),或者使用 3 个关键字之一,它们分别是 thick 、medium(默认值) 和 thin。

注意:CSS 没有定义 3 个关键字的具体宽度,所以一个用户可能把 thick 、medium 和 thin 分别设置为等于 5px、3px 和 2px,而另一个用户则分别设置为 3px、2px 和 1px。

 p.one {
        border-style:solid;
        border-width:5px;
    }
    p.two {
        border-style:solid;
        border-width:medium;
    }

边框颜色

border-color属性用于设置边框的颜色。可以设置的颜色:

name - 指定颜色的名称,如 “red” RGB - 指定 RGB 值, 如 “rgb(255,0,0)” Hex - 指定16进制值, 如 “#ff0000”

您还可以设置边框的颜色为”transparent”。

注意:border-color单独使用是不起作用的,必须得先使用border-style来设置边框样式。

  p.one{
        border-style:solid;
        border-color:red;
    }
    p.two {
        border-style:solid;
        border-color:#98bf21;
    }

边框-单独设置各边

在CSS中,可以指定不同的侧面不同的边框:

p {
        border-top-style:dotted;
        border-right-style:solid;
        border-bottom-style:dotted;
        border-left-style:solid;
    }

上面的例子也可以设置一个单一属性:

实例

border-style:dotted solid;

border-style属性可以有1-4个值:

border-style:dotted solid double dashed;

上边框是 dotted 右边框是 solid 底边框是 double 左边框是 dashed

border-style:dotted solid double;

上边框是 dotted 左、右边框是 solid 底边框是 double

border-style:dotted solid;

上、底边框是 dotted 右、左边框是 solid

border-style:dotted;

四面边框是 dotted

上面的例子用了border-style。然而,它也可以和border-width 、 border-color一起使用。

边框-简写属性上面的例子用了很多属性来设置边框。

你也可以在一个属性中设置边框。

你可以在”border”属性中设置:

border-width border-style (required) border-color
    border:5px solid red;

到此这篇关于一文教你玩转CSS border(边框)的文章就介绍到这了,更多相关CSS border边框内容请搜索真格学网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持真格学网!


  • 本文相关:
  • 在线css边框圆角效果代码工具
  • css3图片边框border-image的用法
  • 使用css的border属性构建变形边框的方法总结
  • border-radius以外的css圆角边框制作方法
  • 详解css的border边框属性及其在css3中的新特性
  • 深入浅析css3 border-image边框图像详解
  • css3之边框多颜色border-color属性使用示例
  • CSS怎么制作边框线
  • div+css如何设置边框border?
  • 怎么用CSS设置html中的表格边框样式
  • 关于网页制作网页的一个问题,这种效果应该怎么做...
  • css+div的边框是花纹的,怎样用代码写出来?
  • css怎么定义边框(border),使边框只显示外边框,...
  • 关于网页制作CSS样式问题
  • 代码 怎么写 使用CSS样式制作一个外框为虚线,内框...
  • html中的css中怎么设置一个矩形边框,然后在里面添...
  • 如何利用HTML5和CSS3设置四边边框border边界线
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全主页网页制作csscss教程cssborder边框css3图片边框border-image的用法使用css的border属性构建变形边框的方法总结border-radius以外的css圆角边框制作方法详解css的border边框属性及其在css3中的新特性深入浅析css3 border-image边框图像详解css3之边框多颜色border-color属性使用示例css教程css3div+css教程web标准教程浏览器兼容教程css布局实例css控制ul li 的样式详解(推荐)html设置超链接字体颜色和点击后的字体颜色div水平垂直居中的完美解决方案css设置各种中文字体如雅黑、黑体、宋体、楷体等等css 文本字体颜色设置方法(css color)css 漂亮搜索框美化代码css自定义select下拉选择框的样式(不用其他标签模拟)css圆角效果 -webkit-border-radius(css3中border-radcss 中的background:transparent到底是什么意思有什么css 首行缩进两个文字css 实现各种 loading 效果附带解析过程如何通过 display:olck/none 完成一个菜单栏300 多行css代码搞定微信 8.0 的炸裂特效css之粘性sticky布局实现题头定位在顶部的方法有趣的css实现隐藏元素的7种思路css实现快速炫酷抖动动画效果css弹性盒flex-grow、flex-shrink、flex-basis详解子元素margin-top导致父元素移动的问题解决生僻标签 fieldset 与 legend 的用法详解css世界--代码实践之图片alt信息呈现
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved