css border（css border有几种样式）

本文目录

• css border有几种样式
• 怎么用css控制border成为三角形
• css中虚线长度的设置
• DIV+CSS里的垂直的点虚线怎么做
• 如何用CSS定义虚线间隔
• css border 虚线怎么对齐

css border有几种样式

border后加三个参数：边框粗细　边框样式　边框颜色

如border:2px solid #ccc;其中边框样式包括：none定义无边框。solid定义实线。dotted定义点状边框。在大多数浏览器中呈现为实线。

dashed定义虚线。在大多数浏览器中呈现为实线。double定义双线。双线的宽度等于 border-width 的值。

怎么用css控制border成为三角形

用css控制border成为三角形可以参考以下的代码：

.a {width:0;height:0;border-left:50px solid transparent;border-right:50px solid transparent;border-bottom:100px solid red;}

扩展资料：

border的css应用

如使用该复合属性定义其单个参数，则其他参数的默认值将无条件覆盖各自对应的单个属性设置。

默认值为：medium none。border-color的默认值将采用文本颜色。

提示和注释

注释：HTML 4.01 不推荐使用图像的 “border“ 属性。在 XHTML 1.0 Strict DTD 和 HTML 5 中，不再支持该属性。

提示：请使用 CSS 的边框属性来改变元素的边框样式。您可以在一个外部样式表中使用 CSS 边框属性，为站点上的所有图像设置一致的边框。与单独为一个图像设置 border 属性相比，这种方式无疑拥有更高的效率。

参考资料来源：百度百科-border （英文单词）

css中虚线长度的设置

《!DOCTYPE HTML》《html》《meta charset=“UTF-8“ /》《head》《title》《/title》《/head》《script src=“http://libs.baidu.com/jquery/2.0.0/jquery.min.js“》《/script》《style type=“text/css“》*{margin: 0;padding: 0;}.box {width: 100%;border: 1px solid #000000;box-sizing: border-box;position: relative;}.img1{height: 100%;width: 100%;}li{list-style: none;}.box li{border-bottom: 1px dashed #000000;width: 80%;background: #DCDCDC;height: 35px;}/*dashed是虚线;width控制li的宽度*/.text{position: absolute;top:42.5px;left:30%;}.text20{position: absolute;top:42.5px;right:20px;}《/style》《body》《div class=“demo“》《div class=“box“ style=““》《ul》《li》内容1《/li》《li》内容2《/li》《li》内容3《/li》《/ul》《div class=“text“》灰色内容占总宽度80%《/div》《div class=“text20“》白色内容占《/br》总宽度20%《/div》《/div》《/div》《/body》《/html》

DIV+CSS里的垂直的点虚线怎么做

需要准备的材料分别有：电脑、浏览器、html编辑器。

1、首先，打开html编辑器，新建html文件，例如：index.html。

2、在index.html中的《style》标签中，输入css代码：

div {margin-left: 100px; border-right:1px dashed black; height:150px; width:1px;}

3、浏览器运行index.html页面，此时成功用css和div实现了垂直的点虚线。

如何用CSS定义虚线间隔

在正式绘制边框前，我们先认识一下CSS3 border-image-slice 属性，它可以将border-image-source获取的边框背景图片切割为9份。语法如下：border-image:border-image-source slice-width{1,4}slice-width的值可以是具体像素，也可以是百分比。切割后的图片块分别是border-top-left-imageborder-top-imageborder-top-right-imageborder-left-imageborder-right-imageborder-bottom-left-imageborder-bottom-imageborder-bottom-right-image其中，border-top-image和border-bottom-image区域受到水平方向效果影响，如果是repeat则此区域图片会水平重复，如果是round则会水平平铺，责任stretch则被水平拉升。而我们设置虚线，则选择repeat/round都可以。

css border 虚线怎么对齐

border-style -- 定义边框的样式

• 取值:《border-style》{1,4} | inherit

• 《border-style》{1,4}: 边框样式

• inherit: 继承

• 引用网址:http://www.dreamdu.com/css/property_border-style/

• 初始值: none

• 继承性: 否

• 适用于: 所有元素

• border:边框,style:样式

border-style和border-width的赋值方式是一样的,可以分别赋1,2,3或4个边的样式.

border-style的取值

• none: 无样式

• hidden: 除了同表格的边框发生冲突的时候,其它同none

• dotted: 点划线

• dashed: 虚线

• solid: 实线

• double: 双线,两条线加上中间的空白等于border-width的取值

• groove: 槽状

• ridge: 脊状,和groove相反

• inset: 凹陷

• outset:凸出,和inset相反

猴子提示: 由于border-style的初始值为none,所以除非设置了边框样式,否则边框将无法看见.

示例

• p#fourborders{border-style:dotted dashed solid double;}

如果定义四个值,那么这四个值就分别是上,右,下,左边框(从上边框开始,以顺时针的顺序遍历).定义梦之都段落的上边框为点划线,右边框为虚线,下边框为实线,左边框为双线.

• p#threeborders{border-style:groove ridge outset;}

如果只定义三个值,中间的值代表左和右边框.定义梦之都段落的上边框为槽状,下边框为凸出,左,右边框为脊状.

• p#twoborders{border-style:none dashed;}

如果只定义两个值,前面的值代表上下边框,后面的值代表左右边框.定义梦之都段落的上,下边框为无样式,左,右边框为虚线.

• p#oneborders{border-style:dotted;}

如果只定义一个值,这个值就代表四个边的.定义梦之都段落的边框为点划线.