设置css边框线的方法

发布时间:2020-09-25 10:22:39 作者:小新
来源:亿速云 阅读:292

这篇文章主要介绍设置css边框线的方法,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

CSS中的边框线可以通过border-style属性来设置,它可以设置成点状,虚线,实线,3D 凹槽边框、垄状边框、3D inset 边框等等

边框样式:

border-style:

该属性是用于设置元素所有边框的样式,或者是单独地为各边设置边框样式

边框样式具有以下几种:

none:不定义边框,即无边框

dotted :边框样式为点状边框

dashed :边框样式为虚线

solid:边框样式为实线,在大多数浏览器中呈现为实线。

double:边框样式为双线。双线的宽度等于 border-width 的值。

groove:边框样式为 3D 凹槽边框,它的效果取决于 border-color 的值。

ridge :边框样式为垄状边框,它的效果取决于 border-color 的值。

inset:边框样式为3D inset 边框,它的效果取决于 border-color 的值。

outset :边框样式为 3D outset 边框,它的效果取决于 border-color 的值。

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

案例:

设置边框的上边为点状,下边为虚线,左右两边为实线

div{
			width:100px;
			height: 100px;
			border-style: dotted solid dashed solid;
			border-color: pink;
		}

效果图如下:

设置css边框线的方法

设置边框为3D 凹槽和垄状边框

<style type="text/css">
		.box1{
			width:100px;
			height:30px;
			border:5px groove pink;
			margin-bottom: 5px;

		}
		.box2{
			width:100px;
			height:30px;
			border:5px ridge  pink;

		}
	</style>
</head>
<body>
	<div class="box1">3D 凹槽边框</div>
	<div class="box2">垄状边框</div>
</body>

效果图

设置css边框线的方法

以上是设置css边框线的方法的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注亿速云行业资讯频道!

推荐阅读:
  1. css清除边框线
  2. css中border-collapse属性设置表格边框线的方法

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

css

上一篇:国外有哪些云主机

下一篇:WPF自定义实现IP地址输入控件

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》