css border-style属性怎么用

border-style属性用于设置元素边框的样式,可以同时为一个元素的四个边框设置样式,或者单独地为各边设置边框样式。只有当该属性的值不是 none 时边框才可能出现。

css border-style属性怎么用

css border-style属性怎么用?

border-style属性用于设置元素所有边框的样式,或者单独地为各边设置边框样式。它可以有一到四个值,例:

p.one {border-style:dotted dashed solid double;}p.two {border-style:dotted solid double;}p.three {border-style:dotted solid;}p.four {border-style:dotted;}

登录后复制

效果图:

css border-style属性怎么用

立即学习“前端免费学习笔记(深入)”;

说明:只有当这个值不是 none 时边框才可能出现。

可以设置的属性值:

none:定义无边框。

hidden:与 “none” 相同。不过应用于表时除外,对于表,hidden 用于解决边框冲突。

dotted:定义点状边框。在大多数浏览器中呈现为实线。

dashed:定义虚线。在大多数浏览器中呈现为实线。

solid:定义实线。

double:定义双线。双线的宽度等于 border-width 的值。

groove:定义 3D 凹槽边框。其效果取决于 border-color 的值。

ridge:定义 3D 垄状边框。其效果取决于 border-color 的值。

inset:定义 3D inset 边框。其效果取决于 border-color 的值。

outset:定义 3D outset 边框。其效果取决于 border-color 的值。

inherit:规定应该从父元素继承边框样式。

注释:任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 “inherit” 或 “hidden”。

css border-style属性 示例

nbsp;html> 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;}

无边框。

虚线边框。

虚线边框。

实线边框。

双边框。

 凹槽边框。

垄状边框。

嵌入边框。

外凸边框。

隐藏边框。

登录后复制

效果图:

1.jpg

以上就是css border-style属性怎么用的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2887078.html

(0)
上一篇 2025年3月10日 20:58:47
下一篇 2025年3月8日 20:40:00

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • css counter-increment属性怎么用

    counter-increment 属性设置某个选取器每次出现的计数器增量。默认增量是 1。 说明 利用这个属性,计数器可以递增(或递减)某个值,这可以是正值或负值。如果没有提供 number 值,则默认为 1。 注释:如果使用了 &#82…

    2025年3月10日
    200
  • css text-decoration-color属性怎么用

    css text-decoration-color属性用于设置文本修饰(下划线、上划线、中划线)的颜色。注只有先在元素上设置可见的text-decoration属性,text-decoration-color属性才起作用。 css text…

    2025年3月10日
    200
  • css技术是什么

    css是什么?也许你曾听说过css,但并不真正清楚css到底是什么。在本篇文章中你将学到更多css的知识,并了解css可以做些什么。 CSS是Cascading Style Sheets(层叠样式表)的缩写。 可以用CSS做什么? CSS是…

    2025年3月10日
    200
  • css单位是什么

    css是一种样式表语言,用于为html文档定义布局。而刚刚接触css的朋友可能不是很清楚,css的单位是什么?下面我们来详细了解一下css的单位吧。 CSS单位是一种量度单位,包括尺寸单位和颜色单位。 尺寸单位: 颜色单位: 立即学习“前端…

    2025年3月10日
    200
  • 什么是css盒子模型?

    CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。它又称为框模型 (Box Model) ,是由元素内容(content)、内边距(padding)、边框(border)、外边距(margin)几个要素组成的(如下图所…

    2025年3月10日
    200
  • 什么是css的行内式?

    行内样式,就是将css样式代码写在具体网页中的一个html标签元素内;行内样式要在特定的html标记内使用,使用style属性来设置特定html标记的样式。比如: 特点: 1)、行内样式放在代码中的HTML元素中。 2)、使用行内样式时,样…

    2025年3月10日
    200
  • css左浮动怎么写?

    在css中可以通过float属性来定义元素在哪个方向浮动;想要左浮动则只需将元素的float属性的值设置为left(float:left)即可。下面就来给大家介绍一下float属性,希望对你们有所帮助。 css float属性 float …

    2025年3月10日
    200
  • 怎么在css中改变光标样式

    在css中cursor属性是用来定义了鼠标指针放在一个元素边界范围内时所用的光标形状;我们可以通cursor属性来设置鼠标光标(指针)样式。 cursor属性的语法: cursor: auto|crosshair|default|hand|…

    2025年3月10日
    200
  • hbuilder怎么引用css

    hbuilder是dcloud(数字天堂)推出的一款支持html5的web开发ide。hbuilder的编写用到了java、c、web和ruby。hbuilder本身主体是由java编写,它基于eclipse,所以顺其自然地兼容了eclip…

    2025年3月10日
    200
  • 《CSS权威指南》怎么样

    《css权威指南》是2007年10月由中国电力出版社出版的图书,作者是eric a.meyer。 本书通过诸多示例,详细讲解了如何做到仅在一处建立样式表就能创建或修改整个网站的外观,以及如何得到html力不能及的更丰富的表现效果。同时展示了…

    2025年3月10日
    200

发表回复

登录后才能评论