Login
网站首页 > 文章中心 > 其它

cssborder实线边框_css对div设置边框?

作者:小编 更新时间:2023-07-23 15:02:02 浏览量:293人看过

border属性 :在网页中设置元素的边框样式。可同时设置边框宽度、边框样式、边框颜色。也可以单独设置上边、右边、下边、左边的边框。

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

border-width :边框宽度。可以指定长度值。如1px,1em(单位为px,pt,em等)。或者使用关键字medium(默认),thick,thin。

 border-top-width:设置元素上边框宽度

 border-right-width:设置元素右边框宽度

 border-bottom-width:设置元素下边框宽度

 border-left-width:设置元素左边框宽度

border-style :边框样式。

 border-top-style:设置元素上边框样式

 border-right-style:设置元素右边框样式

 border-bottom-style:设置元素下边框样式

 border-left-style:设置元素左边框样式

 属性值有:

  none:无边框。

  hidden:隐藏边框。对于表,hidden 用于解决边框冲突。

  dotted:点状边框。

  dashed:虚线边框。

  solid:实线边框。

  double:双线边框。两条单线与其间隔的和等于指定的border-width值。

  groove:3D凹槽边框。

  ridge:3D垄状边框。

  inset:凹边框。

  outset:凸边框。

border-color :边框颜色。

1.1 边框各样式效果图

1.2 四条边颜色样式相同

1.3 四条边颜色不同,样式相同

1.4 四条边颜色相同,样式不同

1.5 设置上边框宽度、样式、颜色

1.6 设置右边框宽度、样式、颜色

1.7 设置下边框宽度、样式、颜色

1.8 设置左边框宽度、样式、颜色

以上对border边框属性进行了基础操作,大家可以根据自己的经验为边框制作出更漂亮的样式。如若大家有什么更好的见解,那就在回复区畅所欲言吧,我定会吸取精华~如有写错欢迎大家回复,我以后定会更加细心 _

属性设置为solid、HTML元素添加实线边框。

1、因为在css中将border-style属性设置为solid,所以时显示实线。

2、在css中设置border的属性值时给HTML元素添加实线边框,也会时显示实线。

可以用border-color属性设置span和div的边框颜色,用background属性控制span和div的背景颜色。

1、新建html文档,在body标签中添加div标签,然后在div标签中添加一些span标签:

2、添加style标签并定义一个类,为这个类设置border-color属性,属性值为边框的颜色,然后将这个类引用到div和span标签上,这时div和span就被添加上了边框颜色:

3、为之前设置的类添加background属性,属性值为背景颜色,这时div和span就被添加上了背景颜色:

1、打开html开发工具,新建一个html代码页面,然后创建一个标签,并给这个标签添加文字和一个class为了solid。

创建代码:solid:定义一个边框

2、设置线条边框。创建标签,然后在这个标签里设置solid类的样式为实线边框。

css样式代码:

.solid{

border-style:solid;

border-width:1px;

}

3、保存html代码,然后使用浏览器打开,即可看到浏览器页面上显示一个实线边框。

版权声明:倡导尊重与保护知识产权。未经许可,任何人不得复制、转载、或以其他方式使用本站《原创》内容,违者将追究其法律责任。本站文章内容,部分图片来源于网络,如有侵权,请联系我们修改或者删除处理。

编辑推荐

热门文章