css怎么设置不同的边框样式-创新互联

这篇文章主要为大家详细介绍了css怎么设置不同的边框样式，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。

创新互联是一家专注于成都网站设计、成都网站制作、外贸网站建设与策划设计,峨山县网站建设哪家好?创新互联做网站,专注于网站建设10年,网设计领域的专业建站公司;建站业务涵盖:峨山县等地区。峨山县做网站价格咨询:18980820575

一：border边框线的基本样式

边框样式属性指定要显示什么样的边界

1.border-style 属性

none: 默认无边框
   dotted: 定义一个点线边框
   dashed: 定义一个虚线边框
   solid: 定义实线边框
   double: 定义两个边框。 两个边框的宽度和 border-width 的值相同
   groove: 定义3D沟槽边框。效果取决于边框的颜色值
   ridge: 定义3D脊边框。效果取决于边框的颜色值
   inset:定义一个3D的嵌入边框。效果取决于边框的颜色值
   outset: 定义一个3D突出边框。 效果取决于边框的颜色值

 
 




	

		
无边框。
		
虚线边框。
		
虚线边框。
		
实线边框。
		
双边框。
		
 凹槽边框。
		
垄状边框。
		
嵌入边框。
		
外凸边框。
		
隐藏边框。
	

效果图：

上例是同时设置上、下、左、右四面的边框，也可以单独设置一面的边框：border-top-style(上边框)，border-bottom-style(下边框)，border-left-style(左边框)，border-right-style(右边框).

2.border-width 属性

设置边框宽度，为边框指定宽度有两种方法：可以指定长度值，比如 2px 或 0.1em(单位为 px, pt, cm, em 等)，或者使用 3 个关键字之一，它们分别是 thick 、medium（默认值） 和 thin。

	
		
		
		
	

	
		

			
一些文本。
			
一些文本。
			
一些文本。
		
	

效果图：

注意: "border-width" 属性 如果单独使用则不起作用。要先使用 "border-style" 属性来设置边框。

3.border-color 属性

设置边框的颜色。可以设置的颜色：
   name - 指定颜色的名称，如 "red"
   RGB - 指定 RGB 值, 如 "rgb(255,0,0)"
   Hex - 指定16进制值, 如 "#ff0000"

	
		
		
		
	

	
		

			
颜色1
			
颜色2
			
颜色3
		
	

效果图：

注意: "border-color" 属性 如果单独使用则不起作用. 要先使用 "border-style" 属性来设置边框。

4.边框-简写属性

上面是分别设置边框的不同属性，也可以同时设置边框的不同属性，例：

border:5px solid red;

二：边框圆角

border-radius：边框四边同时设置圆角
   border-top-left-radius：设置边框的左上角圆角
   border-top-right-radius：设置边框的右上角圆角
   border-bottom-left-radlius：设置边框的左下角圆角
   border-bottom-right-radius：设置边框的右下角圆角

顾名思义，就是可以在设置边框的基本属性后，在给边框添加圆角效果

	
		
		
		
	

	
		

			
四边同时设置圆角
			
左上角设置圆角
			
右上角设置圆角
			
左下角设置圆角
			
右下角时设置圆角
		
	

效果图：

三：边框阴影（box-shadow）

h-shadow : 水平阴影距离
v-shadow : 垂直阴影距离
blur : 可选，模糊距离
spread : 可选， 阴影的尺寸
color : 可选，颜色
inset : 可选值,将当前阴影修改为内阴影

语法规范：box-shadow:h-shadow v-shadow blur spread color inset；
也可简写为：box-shadow:h-shadow v-shadow blur color；

	
		
		
		
	

	
		

			hello
		
	

效果图：

设置边框阴影效果，可以让盒子（容器）变得更加立体，带来更好的视觉效果。

关于css怎么设置不同的边框样式就分享到这里了，当然并不止以上和大家分析的办法，不过小编可以保证其准确性是绝对没问题的。希望以上内容可以对大家有一定的参考价值，可以学以致用。如果喜欢本篇文章，不妨把它分享出去让更多的人看到。

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

网页名称：css怎么设置不同的边框样式-创新互联
转载源于：http://6mz.cn/article/dhggdd.html