CSS border(边框)样式写法总结

html-css030

CSS border(边框)样式写法总结,第1张

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

css字体下的边框怎么变短

1.打开编辑器,在编辑器里新建test.html,用来学习今天的内容

2. 在body区域,新建一个class为study的div

3. 在style标签内,给study设置宽300px,高200px,粗细为1px的黑色边框

4. 在浏览器中打开test.html,可以看到一个黑色边框的长方形

5. 回到编辑器,在style标签内,将study的border属性后面的1px改成3px

6. 再次在浏览器中打开test.html,会发现页面里长方形的边框变粗了

只是第一种的代码,第二种的话只需要吧div的实线solid改为虚线dashed就可以了

<style>

#a{ list-style:nonemargin:0px padding:0px border:2px solid #000 width:400px}

#a ul{  margin:0px padding:0px}

#a ul li{ list-style:none height:30px line-height:30px border-bottom:2px dashed #000 text-align:center}

#a ul li.no{list-style:noneborder-bottom:0px}

</style>

<div id="a">

<ul>

     <li>写一些文字</li>

        <li>写一些文字</li>

        <li>写一些文字</li>

        <li class="no">写一些文字</li>

    </ul>

</div>