10CSS边框边距_边框部分210912

牛青 • 2022年8月10日 pm1:19 • web开发技术 • 224 阅读
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" name="referrer" content="no-referrer" />
<!--    <link rel="stylesheet" type="text/css" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">-->
<style>
body {
margin-left: 500px;
background: #5d9ab2 url("https://cdn.pixabay.com/photo/2020/04/22/15/25/stag-5078652_960_720.png") no-repeat right top fixed;
}
.center_div
{
border: 1px solid gray;
margin-left: -500px;
margin-right:100px;
width: 80%;
background-color: #d0f0f6;
/*background-color: lightskyblue;*/
text-align: left;
padding: 8px;
}
/*一些段落和标题格式*/
p{
text-indent: 50px;  /* 缩进文本 */
border-style: ;
}
h2, h3, h4, h5{
text-indent: 20px;  /* 缩进文本 */
}
/*1.设置四个边框的宽度*/
p.one{
border-style: solid;
border-width: 5px;
}
p.two{
border-style: solid;
border-width: medium;
}
p.three{
border-style: dotted;
border-width: 2px;
}
p.four{
border-style: dotted;
border-width: thick;
}
p.five{
border-style: double;
border-width: 15px;
}
p.six{
border-style: double;
border-width: thick;
}
/*2.设置上、下、左、右边框的宽度*/
p.top{
border-style: solid;
border-top-width: 15px;
}
p.bottom{
border-style: solid;
border-bottom-width: 15px;
}
p.left{
border-style: solid;
border-left-width: 15px;
}
p.right{
border-style: solid;
border-right-width: 15px;
}
/*3.设置四个边框的样式*/
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.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}
/*4.设置上、下、左、右边框的样式*/
p.top-style {border-top-style: dotted;}
p.bottom-style {border-bottom-style: dotted;}
p.left-style {border-left-style: dotted;}
p.right-style {border-right-style: dotted;}
/*5.设置四个边框的颜色*/
p.color1 {
border-style: solid;
border-color: #0000ff;
}
p.color2 {
border-style: solid;
border-color: #ff0000 #0000ff;
}
p.color3 {
border-style: solid;
border-color: #ff0000 #00ff00 #0000ff;
}
p.color4 {
border-style: solid;
border-color: #ff0000 #00ff00 #0000ff rgb(250,0,255);
}
/*6.设置上、下、左、右边框的颜色*/
p.top-color{
border-style: solid;
border-top-color: #ff0000;
}
p.bottom-color{
border-style: solid;
border-bottom-color: #ff0000;
}
p.left-color{
border-style: solid;
border-left-color: #ff0000;
}
p.right-color{
border-style: solid;
border-right-color: #ff0000;
}
/*7.一个声明中的所有边框属性（简写版）*/
p.shorthand-property{
border: 5px solid red;
}
/*8.为元素添加圆角边*/
p.normal {
border: 2px solid red;
}
p.round1 {
border: 2px solid red;
border-radius: 5px;
}
p.round2 {
border: 2px solid red;
border-radius: 8px;
}
p.round3 {
border: 2px solid red;
border-radius: 12px;
}
/*9.每边设置不同的边框*/
p.diff-one {
border-style: dotted solid dashed double;
}
p.diff-two {
border-style: dotted solid dashed;
}
p.diff-three {
border-style: dotted solid;
}
p.diff-four {
border-style: dotted;
}
/*10.一个声明中的所有顶部、底部、左右的边框属性（简写版）*/
p.border-top-shorthand-property{
border-style: solid;
border-top: thick double #ff0000;
}
p.border-bottom-shorthand-property{
border-style: solid;
border-bottom: thick double #ff0000;
}
p.border-left-shorthand-property{
border-style: solid;
border-left: thick double #ff0000;
}
p.border-right-shorthand-property{
border-style: solid;
border-right: thick double #ff0000;
}
</style>
</head>
<div class="center_div">
<h1>边框边距</h1>
<h4 style="color:pink"> /**/</h4>
<h2>一.边框</h2>
<h3>1.设置四个边框的宽度</h3>
<p>给p添加  border-style: 样式;
border-width: 宽度;</p>
<p>如：p.four {
border-style: dotted（点缀）;
border-width: thick（厚的）;
}</p>
<h5> border-width(边框宽度属性)</h5>
<p>此属性指定四个边框的宽度：</p>
<p class="one">Some text.（        border-style: solid;
border-width: 5px;）</p>
<p class="two">Some text.（        border-style: solid;
border-width: medium;）</p>
<p class="three">Some text.（        border-style: dotted;
border-width: 2px;）</p>
<p class="four">Some text.（        border-style: dotted;
border-width: thick;）</p>
<p class="five">Some text.（        border-style: double;
border-width: 15px;）</p>
<p class="six">Some text.（        border-style: double;
border-width: thick;）</p>
<p><b>注意</b>：如果单独使用“border-width”属性将不起作用。始终指定“border-style”属性来首先设置边框。
</p>
<h3>2.设置上、下、左、右边框的宽度</h3>
<p>给p添加  border-style: 样式;
border-top-width: 宽度;</p>
<p>如：p.top {
border-style: solid;
border-top-width: 15px;
}</p>
<p class="top">Some text.（          border-style: solid;
border-top-width: 15px;）</p>
<p class="bottom">Some text.（        border-style: solid;
border-bottom-width: 15px;）</p>
<p class="left">Some text.（        border-style: solid;
border-left-width: 15px;）</p>
<p class="right">Some text.（        border-style: solid;
border-right-width: 15px;）</p>
<p><b>注意</b>：如果单独使用“border-top-width”、“border-bottom-width”、“border-left-width”、“border-right-width”属性将不起作用。首先使用“border-style”属性设置边框。
</p>
<h3>3.设置四个边框的样式</h3>
<p>先设置了p的边框。也可不设置。为p {
border-style: solid;
}再给p添加  border-style: 样式; </p>
<p>如：p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}</p>
<h5>border-style（边框样式）属性</h5>
<p>此属性指定要显示的边框类型：</p>
<p>/* 下面括号 意思随便翻译的 */</p>
<p class="dotted">A dotted border（虚线边框）.</p>
<p class="dashed">A dashed border（虚线边框）.</p>
<p class="solid">A solid border（厚边框）.</p>
<p class="double">A double border（双边框）.</p>
<p class="groove">A groove border（凹槽边框）.</p>
<p class="ridge">A ridge border（山脊边框）.</p>
<p class="inset">An inset border（内嵌边框）.</p>
<p class="outset">An outset border（初始边框）.</p>
<p class="none">No border（无边框）.</p>
<p class="hidden">A hidden border（隐藏边框）.</p>
<p class="mix">A mixed border（混合边框）.</p>
<h3>4.设置上、下、左、右边框的样式</h3>
<p>
给p的其他类 添加  border-top-style: 样式;</p>
<p>如：p.top {
border-style: solid;
border-top-width: 15px;
}</p>
<p class="top-style">Some text.（border-top-style: dotted;）</p>
<p class="bottom-style">Some text.（border-bottom-style: dotted;）</p>
<p class="left-style">Some text.（border-left-style: dotted;）</p>
<p class="right-style">Some text.（border-right-style: dotted;）</p>
<h3>5.设置四个边框的颜色</h3>
<p>
给p添加  border-style: 样式;
border-color: 颜色;</p>
<p>如：    p.color1 {
border-style: solid;
border-color: #0000ff;
}
</p>
<p class="color1">One-colored border!(单色边框！)</p>
<p class="color2">Two-colored border!(两色边框！)</p>
<p class="color3">Three-colored border!(三色边框！)</p>
<p class="color4">Four-colored border!(四色边框！)</p>
<p><b>注意</b>：如果单独使用“border-color”属性将不起作用。首先使用“border-style”属性设置边框。</p>
<h3>6.设置上、下、左、右边框的颜色</h3>
<p>
给p的其他类 添加  border-bottom-color: 颜色;</p>
<p>如：p.top {
border-style: solid;
border-bottom-color: #ff0000;
}</p>
<p class="top-color">Some text.（border-top-color: #ff0000;）</p>
<p class="bottom-color">Some text.（border-bottom-color: #ff0000;）</p>
<p class="left-color">Some text.（border-left-color: #ff0000;）</p>
<p class="right-color">Some text.（border-right-color: #ff0000;）</p>
<h3>7.一个声明中的所有边框属性（简写版）</h3>
<p>
border-width、border-style、border-color的简写属性</p>
<p>如：  p.shorthand-property{
border: 5px solid red;
}</p>
<p class="shorthand-property">此属性是边框宽度、边框样式和边框颜色的速记属性(border: 5px solid red;)。</p>
<h3>8.为元素添加圆角边</h3>
<p>设置border 的属性值比如：5px solid red; 然后在设置border-radius ： 半径长度 px </p>
<p>如：p.round3 {
border: 2px solid red;
border-radius: 12px;
}</p>
<h5>border-radius（边界半径属性 ）属性</h5>
<p>此属性用于为元素添加圆角边框：</p>
<p class="normal">Normal border(正常边框  不设置border-radius)</p>
<p class="round1">Round border(圆形边框      border-radius: 5px;)</p>
<p class="round2">Rounder border(圆角边框      border-radius: 8px;)</p>
<p class="round3">Roundest border(最圆边框     border-radius: 12px;)</p>
<h3>9.每边设置不同的边框</h3>
<p>设置border-style 的属性值，设置4个则分给四个边，3个则分给上下平分左右，2个则上下分一个左右分一个，1个则上下左右一个属性值 </p>
<p>如：p.diff-one {
border-style: dotted solid dashed double;
}
</p>
<p class="diff-one">设置4个边框属性值（dotted solid dashed double;）</p>
<p class="diff-two">设置3个边框属性值（dotted solid dashed;）</p>
<p class="diff-three">设置2个边框属性值（dotted solid;）</p>
<p class="diff-four">设置1个边框属性值（dotted;）</p>
<h3>10.一个声明中的所有顶部、底部、左右的边框属性（简写版）</h3>
<p>
border-top的简写属性</p>
<p>如：  p.border-top-shorthand-property{
border-style: solid;
border-top: thick double #ff0000;
}</p>
<p class="border-top-shorthand-property">此属性是所有顶部边框属性的速记属性(    border-top: thick double #ff0000;)。需先写border-style</p>
<p class="border-bottom-shorthand-property">此属性是所有顶部边框属性的速记属性(    border-button: thick double #ff0000;)。需先写border-style</p>
<p class="border-left-shorthand-property">此属性是所有顶部边框属性的速记属性(    border-left: thick double #ff0000;)。需先写border-style</p>
<p class="border-right-shorthand-property">此属性是所有顶部边框属性的速记属性(    border-right: thick double #ff0000;)。需先写border-style</p>
</div>
</body>
</html>
原文：https://www.cnblogs.com/Doner/p/15260885.html
以上是10CSS边框边距_边框部分210912的全部内容。
THE END
二维码
在线音频转文字网页推荐
< <上一篇
JS实现图片上传预览效果
下一篇>>
搜索内容

10CSS边框边距_边框部分210912

目录

目录

推荐文章

最新文章
