Web前端开发之CSS学习笔记4—边框、边距、元素尺寸

最新推荐文章于 2024-09-27 11:28:03 发布
最新推荐文章于 2024-09-27 11:28:03 发布
阅读量7.8k 收藏 96
点赞数 11
分类专栏： web前端 文章标签： 前端 css 学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45709187/article/details/124519388
版权

目录

一、边界

1.border边框

2.border-style属性：边框样式

3.border-width属性：边框的粗度

4.border-top/right/bottom/left属性：为上下左右边框设置样式、宽度、颜色

5.padding-left/top/right/bottom：上下左右内边距

6.圆角边框border-radius 

7.图像边框border-image

8.轮廓outline

9.box-shadow阴影

二、内边距padding

三、外边距margin

四、尺寸

1.box-sizing属性：设置元素尺寸

2.设置元素最大值和最小值

3.块级元素尺寸

一、边界

1.border边框

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

border-width：规定边框的宽度

border-style：规定边框的样式

border-color：规定边框的颜色

例子：border

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>边界</title>
		<style type="text/css">
			p
			{
				width: 99px;
				border: 3px dotted green; /*虚线*/
			}
		</style>
	</head>
	<body>
		<p>好好学习</p>
	</body>
</html>

2.border-style属性：边框样式

border-style属性用于设置元素所有边框的样式，或者单独地为各边设置边框样式。

语法：border-style:none|hidden|inherit;

属性值：

例子：border-style

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>边框的各种样式</title>
		<style type="text/css">
			p.none{border-style: none;} /*没有边框 */
			p.solid{border-style: solid;} /*实线边框 */
			p.dashed{border-style: dashed;} /* 虚线边框*/
			p.dotted{border-style: dotted;} /*圆点边框 */
			p.double{border-style: double;} /*双线边框 */
			p.groove{border-style: groove;} /* 3D槽线边框*/
			p.ridge{border-style: ridge;} /* 3D脊线边框*/
			p.inset{border-style: inset;} /*3D内凹边框 */
			p.outset{border-style: outset;} /*3D外凸边框 */
			p.hidden{border-style:hidden;} /* 隐藏边框*/
		</style>
	</head>
	<body>
		<p class="none">没有边框</p>
		<p class="solid">实线边框</p>
		<p class="dashed">虚线边框</p>
		<p class="dotted">圆点边框</p>
		<p class="double">双线边框</p>
		<p class="groove">3D槽线边框</p>
		<p class="ridge">3D脊线边框</p>
		<p class="inset">3D内凹边框</p>
		<p class="outset">3D外凸边框</p>
		<p class="hidden">隐藏边框</p>
	</body>
</html>

3.border-width属性：边框的粗度

语法：border-width:medium|thin|thick|length|inherit;

注："border-width" 属性如果单独使用的话是不会起作用的。请首先使用 "border-style" 属性来设置边框。 只有当边框样式不是 none 时才起作用。如果边框样式是 none，边框宽度实际上会重置为 0。不允许指定负长度值。

值描述
thin定义细的边框。
medium默认值。定义中等的边框。
thick定义粗的边框。
length允许您自定义边框的宽度。
inherit规定应该从父元素继承边框宽度。

border-width:thin medium thick 10px;

  • 上边框是细边框
  • 右边框是中等边框
  • 下边框是粗边框
  • 左边框是 10px 宽的边框

border-width:thin medium thick;

  • 上边框是细边框
  • 右边框和左边框是中等边框
  • 下边框是粗边框

border-width:thin medium;

  • 上边框和下边框是细边框
  • 右边框和左边框是中等边框

border-width:thin;

  • 所有4个边框都是细边框

 

例子：border-width:10px

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>边框宽度和颜色</title>
		<style type="text/css">
			p{
				border-style: solid;
				border-width: 10px;  /*边框宽度*/
				border-color: #82d2d6;
				font-size: 30px; /*字体大小*/
			}
		</style>
	</head>
	<body>
		<p>雄关漫道真如铁</p>
		<p>而今迈步从头越</p>
		<p>从头越</p>
		<p>苍山如海，残阳如血</p>
	</body>
</html>

 

例子：border-width

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>边框</title>
		<style type="text/css">
			p{
				width: 500px;
			}
			.one
			{
				border-style: solid;  /*"border-width" 属性如果单独使用的话是不会起作用的。请首先使用 "border-style" 属性来设置边框。*/
				border-width: thin  /*细边框*/
			}
			.two
			{
				border-style: solid;
				border-width: medium   /* 中等边框 */
			}
			.three
			{
				border-style: solid;
				border-width: thick   /* 粗边框 */
			}
			.four
			{
				border-style: solid;
				border-width: 10px   /* 自定义边框宽度 */
			}
			.five
			{
				border-style: solid;
				border-width: 5px 10px   /* 上下5，左右10 */
			}
			.six
			{
				border-style: solid;
				border-width: 5px 10px 1px   /* 上5 右10 下1 左10*/
			}
			.seven
			{
				border-style: solid;
				border-width: 5px 10px 1px 20px  /* 上5 右10 下1 左20 */
			}
		</style>
	</head>
	<body>
		<p class="one">1——细边框</p>
		<p class="two">2——中等边框</p>
		<p class="three">3——粗边框</p>
		<p class="four">4——自定义边框宽度10px</p>
		<p class="five">5——上下5px，左右10px </p>
		<p class="six">6——上5px，右10px，下1px，左10px</p>
		<p class="seven">7——上5px，右10px，下1px，左20px</p>
	</body>
</html>

 

 

注：边框简写

 <style type="text/css">
        p{
                border-style: solid;
                border-width: 10px;  /*边框宽度*/
                border-color: #82d2d6;
        }
</style>

可写成：

<style type="text/css">
        p{
                border: solid 10px #82d2d6;
        }
</style>

4.border-top/right/bottom/left属性：为上下左右边框设置样式、宽度、颜色

top：

border-top-style 

border-top-color

border-top-width

left：

border-left-style 

border-left-color

border-left-width

right:

border-right-style 

border-right-color

border-right-width

bottom:

border-bottomp-style 

border-bottom-color

border-bottom-width

 例子：分别设置每条边框设置样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>单独设置边框样式</title>
		<style type="text/css">
			p{
				width: 500px;
				border-top-style: dotted; /*虚线*/
				border-right-style: solid;  /*实线*/
				border-bottom-style: dotted;
				border-left-style: solid;
			}
		</style>
	</head>
	<body>
		<p>北国风光，千里冰封，万里雪飘</p>
	</body>
</html>

 

p{

        border-top-style: dotted;

        border-right-style: solid;

        border-bottom-style: dotted;

        border-left-style: solid;

}

以上也可简写成如下格式：

p{

        border-style:dotted solid dotted solid;  (上 右 下 左)

}

此外还有：

p{

        border-style:dotted solid;  (上下  左右)

}

p{

        border-style:dotted solid double;  (上  左右 下）

}

例子：分别设置每条边样式，颜色，宽度

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>单独设置边框样式</title>
		<style type="text/css">
			p{
				width: 500px;
				border-top: dotted red 2px; /*虚线*/
				border-right: solid blue 5px;  /*实线*/
				border-bottom: dotted green 5px;  /*虚线*/
				border-left: solid black 10px;  /*实线*/
			}
		</style>
	</head>
	<body>
		<p>北国风光，千里冰封，万里雪飘。北国风光，千里冰封，万里雪飘。北国风光，千里冰封，万里雪飘。北国风光，千里冰封，万里雪飘。北国风光，千里冰封，万里雪飘。北国风光，千里冰封，万里雪飘。</p>
	</body>
</html>

 

5.padding-left/top/right/bottom：上下左右内边距

语法：

padding-left:length|length|%|inherit; 

值说明
length规定以具体单位计的固定的左内边距值，比如像素、厘米等。默认值是 0px。
%定义基于父元素宽度的百分比左内边距。此值不会如预期的那样工作于所有的浏览器中。
inherit规定应该从父元素继承左内边距。

例子： 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			P{
				border-left:10px  solid red;
				padding-left: 60px;  /*左内边距*/
				background-color: lightgrey;
				font-size: 35px;
			}
		</style>
	</head>
	<body>
		<h1>《赠梦得》--白居易 </h1>
		<p>一愿世清平，</p>
		<p>二愿身强健 。</p>
		<p>三愿临老头，</p>
		<p>数与君相见 。</p>
	</body>
</html>

 

 

6.圆角边框border-radius 

例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			div
			{
				text-align:center;
				border:2px solid #a1a1a1;
				padding:10px 40px;
				background:#dddddd;
				width:350px;
				border-radius:33px;
			}
		</style>
	</head>
	<body>
		<div>border-radius 属性允许向元素添加圆角。</div>
	</body>
</html>

border-top-right-radius 属性定义右上角边框的形状

border-top-left-radius 属性定义左上角边框的形状

border-bottom-left-radius 属性定义左下角边框的形状

border-bottom-right-radius 属性定义右下角边框的形状

例子：border-top-left-radius

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>圆角边框</title>
		<style type="text/css">
			p{
				width: 300px;
				border:2px solid red;
				border-top-left-radius: 15px 15px;
			}
		</style>
	</head>
	<body>
		<p>愿君长似少年时，愿君不忘乐相知。</p>
	</body>
</html>

 border-top-left-radius: 15px 15px;意为如下图：

 

两个值一样，写一个就可以了：border-top-left-radius: 15px ;

值相同如下语法：border-radius: 15px;

值不同要加/  :border-radius: 30px/15px;

 

7.图像边框border-image

border-image属性使用图片作为对象的边界

语法：

border-image:border-image-source|border-image-slice|border-image-width|border-image-outset|border-image-repeat;

值说明
border-image-source图片的路径。
border-image-slice图片边框向内偏移。
border-image-width图片边框的宽度。
border-image-outset边框图像区域超出边框的量。
border-image-repeat图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)

例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>图像边框</title>
		<style type="text/css">
			p{
				border:30px solid transparent;  /*transparent表示背景透明*/
				padding: 15px;  /*内边距*/
				border-image-source: url(tu9.jpg); /*图像地址*/
				border-image-slice: 96;  /*九宫格样式的图像素为288，像素除以3得此值。只有此像素值不用加px。*/
				border-image-repeat:round;  /*类似repeat值(重复平铺图像来填充区域)。如果无法完整平铺所有图像，则对图像进行缩放以适应区域。*/
			}
		</style>
	</head>
	<body>
		<p>愿君长似少年时，愿君不忘乐相知。</p>
	</body>
</html>

图9样式：

 如果没有border-image-repeat: round;这句话，效果如下：被拉伸

 

加上border-image-width:10px; /*边框宽度*/

8.轮廓outline

outline （轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

注：轮廓不属于元素尺寸的一部分，不影响原有布局页面。轮廓线不会占据空间，也不一定是矩形。

语法：

outline:outline-color|outline-style|outline-width|inherit;

值描述
outline-color规定边框的颜色。
outline-style规定边框的样式。
outline-width规定边框的宽度。
inherit规定应该从父元素继承 outline 属性的设置。

同样，outline-color/style/width也可以简写在一起 

例子：outline和border

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			img {
				margin: 30px;
				border: 20px solid lightblue; 
				border-top-left-radius:5px 30px; 
				border-top-right-radius: 30px 60px; 
				border-bottom-left-radius: 80px 40px; 
				border-bottom-right-radius: 60px 100px;
				outline: 20px solid pink; 
			}
		</style>
	</head>
	<body>
		<img src="tu1.jpg"  alt="图"/>
	</body>
</html>

 

 outline-offset：轮廓与边框边缘的距离

例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>元素轮廓</title>
		<style type="text/css">
			P{
				width: 10em;
				margin: 100px auto; /*margin设置auto有居中效果*/
				padding: 20px;
				border: 5px solid lightblue;
				outline: 10px solid pink;
				outline-offset: 20px;    /*轮廓到边框有20像素的距离*/ 
			}
		</style>
	</head>
	<body>
		<p>世界这么大还是遇见你</p>
	</body>
</html>

9.box-shadow阴影

box-shadow 属性向框添加一个或多个阴影，多个阴影的话拿逗号隔开。

语法：

box-shadow: h-shadow v-shadow blur spread color inset;

值描述
h-shadow必需。阴影的水平偏移量，正数代表向右偏移，负数代表向左偏移。
v-shadow必需。阴影的垂直偏移量，正数代表向下偏移，负数代表向上偏移。
blur可选。模糊距离。值越大边界越模糊。
spread可选。阴影的尺寸。
color可选。阴影的颜色。
inset可选。将外部阴影 (outset) 改为内部阴

例子：

<!DOCTYPE html>
<html>
<head>
    <style>
        div
        {
            width:333px;
            height:333px;
            background-color:#33b084;
            box-shadow: 10px 10px 5px #888888;
        }
    </style>
</head>
<body>
   <div></div>
</body>
</html>

 例子：box-shadow: -10px 10px 8px 8px lightblue;

<!DOCTYPE html>
<html>
<head>
    <style>
        div
        {
            width:333px;
            height:333px;
            background-color:#ffffff;
			margin:30px;
            box-shadow: -10px 10px 8px 8px lightblue;
        }
    </style>
</head>
<body>
   <div></div>
</body>
</html>

 例子：box-shadow: -10px 10px 8px 8px lightblue inset;

<!DOCTYPE html>
<html>
<head>
    <style>
        div
        {
            width:333px;
            height:333px;
            background-color:#ffffff;
			margin:30px;
			box-shadow: -10px 10px 8px 8px lightblue inset;
        }
    </style>
</head>
<body>
   <div></div>
</body>
</html>

 例子：box-shadow: 10px 10px 8px 8px lightblue,10px 10px 8px 8px pink inset;

<!DOCTYPE html>
<html>
<head>
    <style>
        div
        {
            width:333px;
            height:333px;
            background-color:#ffffff;
			margin:30px;
			box-shadow: 10px 10px 8px 8px lightblue,10px 10px 8px 8px pink inset;
        }
    </style>
</head>
<body>
   <div></div>
</body>
</html>

 例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>为元素添加阴影</title>
		<style type="text/css">
			img{
				width:200px ;
				height: 200px;
				margin: 100px;
				box-shadow: 0 0 0 20px #9dbff0,
				            0 0 0 40px #e6d260,
							0 0 0 60px #a7d1b6,
							0 0 0 80px #c6a3db;
			}
		</style>
	</head>
	<body>
		<img src="tu3.jpg" alt="猪猪" />
	</body>
</html>

 

 

二、内边距padding

padding-top
padding-left
padding-right
padding-bottom

例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>内边距演示</title>
		<style type="text/css">
			p{
				border: 2px solid red;
				background: lightblue;
				background-clip: content-box;
				padding-top: 50px;
				padding-left: 20%;
				padding-right: 20em;
				padding-bottom: 20%;
			}
		</style>
	</head>
	<body>
		<p>天行健，君子以自强不息。</p>
	</body>
</html>

 

padding-top: 50px;
padding-left: 20%;
padding-right: 20em;
padding-bottom: 20%;

可简写如下：

padding: 50px 20em 20% 20%;

上  右  下  左

 

三、外边距margin

margin-top
margin-left
margin-right
margin-bottom

例子：图像外边距 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>外边距演示</title>
		<style type="text/css">
			img{
				border: 2px solid red;
				margin: 120px; /*外边距*/
			}
		</style>
	</head>
	<body>
		<img src="tu西瓜.jpg"  alt="xigua"/>
		<img src="tu西瓜.jpg"  alt="xigua"/>
		<img src="tu西瓜.jpg"  alt="xigua"/>
		<img src="tu西瓜.jpg"  alt="xigua"/>
		<img src="tu西瓜.jpg"  alt="xigua"/>
		<img src="tu西瓜.jpg"  alt="xigua"/>
	</body>
</html>

 margin塌陷：如果上下设置两个方块，分别设置margin-bottom: 100px; margin-top: 100px;那两者之间并非距离200px,而是距离100px,如果两者设置的外边距不一样，以大的为距离。

例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>塌陷</title>
		<style type="text/css">
			div.box1{
				width: 200px;
				height: 200px;
				background: pink;
				margin-bottom: 100px;
			}
			div.box2{
				width: 200px;
				height: 200px;
				background: lightblue;
				margin-top: 100px;
			}
		</style>
	</head>
	<body>
		<div class="box1"></div>
		<div class="box2"></div>
	</body>
</html>

margin设置为auto可以实现其水平居中的效果，但前提是设置好宽度。

例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>外边距设置auto</title>
		<style type="text/css">
			P{
				border: 2px solid lightblue;
				padding: 10px;
				margin: auto;  /*居中*/
				width: 12em;	
			}
		</style>
	</head>
	<body>
		<p>天行健，君子以自强不息。</p>
	</body>
</html>

 

 

四、尺寸

1.box-sizing属性：设置元素尺寸

语法：

box-sizing: content-box|border-box|inherit;

值说明
content-box默认值。如果你设置一个元素的宽为 100px，那么这个元素的内容区会有 100px 宽，不算上边框宽度和内边距。
border-box

width(宽度)+padding(内边距)+border(边框)=元素实际宽度；height(高度)+padding(内边距)+border(边框)=元素实际高度。注：border-box不包含margin。

inherit指定 box-sizing 属性的值，应该从父元素继承
 

例子：border-box和content-box
 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"> 
		<title></title>
		<style> 
			#example1 {
				box-sizing: content-box;  /*只是元素高100宽300*/
				width: 300px;
				height: 100px;
				padding: 30px;  
				border: 10px solid lightblue;
			}

			#example2 {
				box-sizing: border-box; /*元素+内边距+边框宽度一共的高100宽300*/
				width: 300px;
				height: 100px;
				padding: 30px;  
				border: 10px solid pink;
			}
		</style>
	</head>
	<body>
		<h2>box-sizing: content-box (默认):</h2>
		<p>高度和宽度只应用于元素的内容:</p>
		<div id="example1">这个 div 的宽度为 300px。但完整宽度为 300px + 20px (左边框和右边框) + 60px (左边距和右边距) = 380px!</div>

		<h2>box-sizing: border-box:</h2>
		<p>高度和宽度应用于元素的所有部分: 内容、内边距和边框:</p>
		<div id="example2">不管如何这里的完整宽度为300px!</div>

	</body>
</html>
 

 

 
 

例子：border-box
 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>设置元素尺寸</title>
		<style type="text/css">
			img{
				width: 100px;
				height: 100px;
				padding: 10px;
				border: 10px double lightblue;
				box-sizing: border-box;   /*设置图片尺寸是100*100.*/
			}
		</style>
	</head>
	<body>
		<img src="tu3.jpg" alt="猪猪" />
	</body>
</html>

 

 

 
 

2.设置元素最大值和最小值
 

min-height 属性设置元素的最小高度。该属性值会对元素的高度设置一个最低限制。因此，元素可以比指定值高，但不能比其矮。不允许指定负值。min-height属性不包括填充，边框，或页边距。
 

min-width 属性设置元素的最小宽度。该属性值会对元素的宽度设置一个最低限制。因此，元素可以比指定值高，但不能比其矮。不允许指定负值。min-width属性不包括填充，边框，或页边距。
 

max-height 属性设置元素的最大高度。该属性值会对元素的高度设置一个最高限制。因此，元素可以比指定值矮，但不能比其高。不允许指定负值。max-width属性不包括填充，边框，或页边距。
 

max-width 定义元素的最大宽度。该属性值会对元素的宽度设置一个最高限制。因此，元素可以比指定值窄，但不能比其宽。不允许指定负值。max-width属性不包括填充，边框，或页边距。
 

 

例子：max-height
 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        p
        {
            max-height:66px;
            background-color:lightblue;
        }
    </style>
</head>
<body>
   <p>这一段的最大高度设置为66 px。Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut distinctio incidunt libero nam quis recusandae velit. A aliquid, blanditiis consectetur enim fugit incidunt inventore iure labore odio possimus saepe vero. Lorem ipsum dolor sit amet, consectetur adipisicing elit. At, consequatur culpa dolores ducimus eum hic incidunt magni officia ratione velit? Dolor fuga maiores nam quasi quis sunt! Dicta, nisi, odit!</p>
</body>
</html>
 

 

 
 

3.块级元素尺寸
 

浏览器中块级元素都是默认顶到浏览器最后面，有的时候一句很短的话要占据一行。使用width可规定语句占据的宽度。
 

但是如果使用width，当浏览器足够大时看不出来，但当浏览器不断缩小时，会发现出现缺失语句的现象，所以可以使用max-width，就不会缺失语句了。
 

 

例子：width和max-width区别
 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			p.first{
				width: 600px;/*缩小页面后会缺失语句*/
				margin: auto;
				border: 3px solid lightblue;
			}
			p.second{
				max-width: 600px;  /*缩小页面后不会缺失语句*/
				margin: auto;
				border: 3px solid pink;
			}
		</style>
	</head>
	<body>
		<p class="first">天行健，君子以自强不息。天行健，君子以自强不息。天行健，君子以自强不息。天行健，君子以自强不息。</p>
		<p class="second">地势坤，君子以厚德载物。地势坤，君子以厚德载物。地势坤，君子以厚德载物。地势坤，君子以厚德载物</p>
	</body>
</html>

 

浏览器足够大： 
 

 

浏览器缩小： 
 

 

 
 

 

                

        

        

    

  


            

                    
            

    

      

        

            

              
                
                  云卷云舒_jing
                
              
            

            

                关注
              
            

        

        

          
      

      

            

                专栏目录
          









                



	

		

			

				
					
从零开始学web开发之CSS-5.边框样式

				
			

			

				

					pigdreams的博客
				

				

					04-21
					
					562
					
				

			

		

		

			
				
简介

要定义一个元素的边框必须要设置三个方面的元素，少设置一个属性浏览器也能正常识别，会以默认值的方式。




  属性
  说明



  border-width
  边框的宽度


  border-style
  边框的外观


  border-color
  边框的颜色








1.border-width

定义边框宽度 
语法：



border-width:像素值;...

			
		

	



                

            
              



	

		

			

				
					
Web前端开发-边框设置

					
热门推荐

				
			

			

				

					viewerlin的博客
				

				

					04-25
					
					1万+
					
				

			

		

		

			
				
Web前端开发，自学笔记整理





边框设置

1.边框设置技巧



&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;meta charset="UTF-8"&gt;
        &lt;title&gt;&lt;/title&gt;
        &lt;style type="te

			
		

	



              


  
              

                


	

		

			

				
					
好程序员web前端分享CSS3 边框

				
			

			

				

					weixin_34122810的博客
				

				

					05-15
					
					114
					
				

			

		

		

			
				
好程序员web前端分享CSS3 边框，通过 CSS3，您能够创建圆角边框，向矩形添加阴影，使用图片来绘制边框 - 并且不需使用设计软件，比如 PhotoShop。在本章中，您将学到以下边框属性：border-radiusbox-shadowborder-image浏览器支持​Internet Explorer 9+ 支持 border-radius 和 box-shadow 属性。Firefox、...

			
		

	





	

		

			

				
					
CSS边框

					
最新发布

				
			

			

				

					2401_82561004的博客
				

				

					09-27
					
					1571
					
				

			

		

		

			
				
CSS 中的边框是围绕着元素内容和内边距的一条或多条线段，您可以自定义这些线段的样式、宽度以及颜色。

			
		

	



		

			
		



	

		

			

				
					
【前端学习记录5】边框样式、列表样式、表格样式、图片样式和背景样式

				
			

			

				

					aftertasttea的博客
				

				

					12-08
					
					1740
					
				

			

		

		

			
				
一、边框样式

   1、整体样式：

      (1)属性：border-width定义宽度

             border-style定义外观：none无样式、dashed虚线、solid实线

             border-color定义颜色：取值“关键字”或“十六进制RGB值”

      (2)简写形式：

             div{border:1p...

			
		

	





	

		

			

				
					
【网页前端】CSS的基本样式边框、布局、字体

				
			

			

				

					专注于Java领域开发 关注我 带你玩转Java
				

				

					07-21
					
					1917
					
				

			

		

		

			
				
那些你必须会的CSS基本样式 边框属性 布局 字体

			
		

	





	

		

			

				
					
我的HTML+Css学习笔记

				
			

			

				

					02-25
				

			

		

		

			
				
这份“我的HTML+Css学习笔记”无疑是对于初学者来说极好的资源，它涵盖了从基础到进阶的重要概念。  HTML是网页内容的结构语言，通过一系列标签来定义网页的各个部分，如`<head>`、`<body>`、`<h1>`至`<h6>`的标题、...

			
		

	





	

		

			

				
					
【Web前端学习之路】CSS基础知识（黑马课程学习笔记）

				
			

			

				

					a123456_9的博客
				

				

					04-14
					
					340
					
				

			

		

		

			
				
day3

CSS的介绍

CSS：层叠样式表，简单来说就是用于美化html网页，给HTML标签设置样式。CSS写在style标签中，style标签是嵌套于head标签内部，title标签下；选择器的作用是选择要修饰的标签。




			
		

	





	

		

			

				
					
web前端基础学习笔记

				
			

			

				

					01-08
				

			

		

		

			
				
### Web前端基础学习笔记  #### 一、HTML  ##### 1. HTML简介  - **网站与网页**: 网页是使用HTML标记语言编写的文件，用于描述同一范畴内的信息或数据。多个网页组成一个网站。 - **HTML**: 超文本标记语言，是一种...

			
		

	





	

		

			

				
					
Web前端开发学习笔记

				
			

			

				

					qq_43538362的博客
				

				

					07-17
					
					455
					
				

			

		

		

			
				
#HTML5学习
一、布局
1.div模块布局
给定div模块，给定class或者id形成模块来进行布局，之后用样式来进行修饰。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>布局</title>
    <st...

			
		

	





	

		

			

				
					
2021-04-05 web前端CSS之权重，盒子边框内外边距

				
			

			

				

					qq_44837911的博客
				

				

					04-05
					
					238
					
				

			

		

		

			
				
视频学习：黑马程序员pink老师

笔记：层叠性
相同选择器给设置相同的样式——如果样式冲突，就近原则
样式不冲突，不会层叠
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-eq.

			
		

	





	

		

			

				
					
web前端--边框的特征

				
			

			

				

					
				

				

					09-18
					
					215
					
				

			

		

		

			
				
1、一个面试题：边框是什么形状的？
　　你可能认为是一个矩形的 细心地人可能说是 梯形 或者 三角形
　　比较合理的答案是 非矩形的
2、画三角形
将div的width height 都设置为0px
border的颜色设置为white
那么想要什么朝向的三角形 就设置它朝向反方向的边框颜色就可以了
如：border-left-color:gold;这就是一个朝向右边的...

			
		

	





	

		

			

				
					
前端边框练习

				
			

			

				

					夏天吹雪的博客
				

				

					05-30
					
					301
					
				

			

		

		

			
				
边距练习&lt;!DOCTYPE html&gt;
&lt;html&gt;
	&lt;head&gt;
		&lt;meta charset="UTF-8"&gt;
		&lt;title&gt;&lt;/title&gt;
		&lt;style&gt;
		/*设置外边距 先把外边框置零*/
			* {
				margin: 0;
				padding: 0;
		

			
		

	





	

		

			

				
					
前端基础圆角边框

				
			

			

				

					weixin_42218868的博客
				

				

					03-20
					
					779
					
				

			

		

		

			
				
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    *{
    background-color: aqua;
    }
    p{
      ...

			
		

	





	

		

			

				
					
对前端页面的边框设置

				
			

			

				

					等风来盼风去
				

				

					08-14
					
					6624
					
				

			

		

		

			
				
二·如何对边框设置：
１.&lt;div style="text-align:center; vertical-align:middel;"&gt;&lt;input type="text"&gt;&lt;/div&gt;
这样你试试,应该就是左右 上下都居中了

２.如果是让内容显示的居中：
&lt;html&gt;
&lt;head&gt;
&lt;style&gt;


			
		

	





	

		

			

				
					
前端开发_HTML5_CSS部分-边框(border)

				
			

			

				

					u013185175的博客
				

				

					12-14
					
					8762
					
				

			

		

		

			
				
边框样式

1.概述

 我们之前已经把CSS的选择器学习了一遍，接下来，我们就一起来学习一下一些常见的样式属性，我们从边框样式开始学习。

2.边框样式

 CSS中使用关键字border实现指定元素边框的样式、宽度和颜色。

3.边框的常用属性


边框border常用的属性

1.border-style:设置边框的样式，其常用的样式有:
               none(无边框)
               soild(实线边框)
               dashed(虚线边框...

			
		

	





	

		

			

				
					
CSS盒模型

				
			

			

				

					yang_040706的博客
				

				

					09-21
					
					204
					
				

			

		

		

			
				
CSS盒模型

			
		

	





	

		

			

				
					
前端补充---6（边框）

				
			

			

				

					2303_79741845的博客
				

				

					01-09
					
					1334
					
				

			

		

		

			
				
如图，我们的盒子模型：宽度，高度，边框，外边距(margin)内边距(padding)                                                                                           盒子居中的写法：margin:0px auto;2.双值写法:padding:10px 30px;分别代表：上、左右、下        4.四值写法: pzdding:10px 30px 60px 50px;层叠性：后写的样式会覆盖先前写的。

			
		

	





	

		

			

				
					
前端学习笔记之——使用边框和背景

				
			

			

				

					前尘忆梦的博客
				

				

					06-24
					
					984
					
				

			

		

		

			
				
使用边框和背景
1、应用边框样式
简单边框有三个关键属性：border-width、border-style 和 border-color。
<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <meta name="author" content="Adam Freeman"/>
        <meta name="descript

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值