前言：本人是新生小白，如有错误之处欢迎指出

border-radius 添加圆角

box-shadow 添加阴影

border-style 添加边框样式

首先介绍border-radius

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#div1
{border:2px solid #a1a1a1;padding:10px 40px; background:#f00;width:300px;border-radius:25px;
}
#div2 {border: 2px solid red;padding: 10px;border-radius: 50px 20px;
}
</style>
</head>
<body>
<div id="div1"><p>11111111111</p>
</div>
<br><br>
<div id="div2"><p>222222222222</p>
</div>
</body>
</html>

！注意：如果设置了两个值，第一个用于左上角和右下角，第二个用于右上角和左下角

然后介绍box-shadow

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#div1
{width:300px;height:100px;background-color:yellow;box-shadow: 10px 10px 5px #888888;
}</style>
</head>
<body><div id="div1"></div></body>
</html>

最后介绍border-style

none: 默认无边框

dotted: 定义一个点线边框

dashed: 定义一个虚线边框

solid: 定义实线边框

double: 定义两个边框。两个边框的宽度和 border-width 的值相同

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
p
{border-top-style:solid;border-right-style:dotted;border-bottom-style:dashed;border-left-style:double;
}
</style>
</head><body>
<p>不同的边界样式。</p>
</body>
</html>

border边框属性的介绍相关推荐

CSS的border边框属性边框样式内外边框圆角合集
CSS border 属性允许指定元素边框的样式.宽度和颜色. 目录 1.四个边框 2.内外边框 3.边框样式 4.圆角边框 1.border边框属性可以设置一到四个值(上边框,右边框,下边框,左边 ...
html边框复合属性,详解CSS的border边框属性及其在CSS3中的新特性
基础你可能很熟悉边的最基本用法. CSS Code复制内容到剪贴板 border:1pxsolidblack; 上面的代码将给元素应用1px的边.即简洁又简单:但我们也可以稍作修改. CSS Code ...
html 折线边框,HTML中的边框属性
可以通过边框风格属性border-style设定上下左右边框的风格,该属性用于设置一个元素边框的样式,而且必须用于指定可见的边框.可以使用1到4个关键字,如果四个值都给出了,它们分别用于上.右.下和左 ...
java border边框_简单实用的css边框属性border
本文主要讲述利用border属性做出不同的几何形状从而适用于比较好看的视觉样式. 预备知识 border相关属性 border-width 边框的宽度 border-style 边框的样式 borde ...
CSS-12.css边框属性（border）
在盒子模型中我们通常会给盒子设置边框属性,使之完成某些功能和样式我们会使用css中的border属性来设置边框一般会通过连写来设置border,他下面还有width,style,color的属性, ...
html--盒子的边框属性（border）
content:内容框(我们设置的宽高是内容框的宽高) padding:内边距 top right bottom left(四边--一般默认指定的方向) border:边框线包裹了内边距(四边) ...
css中盒模型的属性包括(),css的盒子模型属性有哪些？css盒子模型相关属性的介绍...
本篇文章给大家带来的内容是关于css的盒子模型属性有哪些?css盒子模型相关属性的介绍,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 1.盒子模型图 2.一个简单的盒子模型 box. ...
图解css3：核心技术与案例实战. 3.3　CSS3图片边框属性
3.3 CSS3图片边框属性 border-image效果在CSS2中,只有使用背景图片来制作,而且制作过程非常复杂,做完后也很难维护.如今CSS3中增添了一个图片边框的属性,能够模拟出backgro ...
CSS 外补白(Margin) 内补白(Padding) 边框属性定位（positioning）属性布局(layout)属性
CSS 布局(Layout) Properties 属性 CSS Version 版本 Inherit From Parent 继承性 Description 简介 display CSS1/CSS2 ...
继承性和层叠性权重盒模型 padding(内边距) border(边框) margin 标准文档流块级元素和行内元素...
内容总结: 1.继承性和层叠性继承性: 像一些文本的属性: color,text-*,line-*,font-* 这些属性是可以继承下来的2.层叠性就是权重 ,谁的权重大就显示谁的属性如何看权重:就 ...

border边框属性的介绍

border-radius 添加圆角

box-shadow 添加阴影

border-style 添加边框样式

首先介绍border-radius

然后介绍box-shadow

最后介绍border-style

border边框属性的介绍相关推荐

最新文章

热门文章