CSS盒模型边框的应用
<!DOCTYPE html><!--声明文档为HTML5文档-->
<html lang="zh-cmn-hans"><!--定义页面为简体中文页面-->
<head><!--头部信息-->
<meta charset="utf-8"><!--声明文档编码为UTF-8-->
<meta name="Author" content="MrTAO,80238980@qq.com"><!--标注文档的作者-->
<title>CSS盒模型---边框</title><!--标题-->
<style type="text/css">
.box{color: red; /*设置文本颜色*/
width:350px;
height:150px; /*设置DIV的宽高*/
font-size: 50px; /*设置文本字体大小*/
border: 1.5px solid #cccccc; /*设置边框的宽度 格式 颜色*/
font-weight: bold; /*设置文本字体加粗*/
text-align: left; /*设置文本对齐方式*/
line-height: 75px; /*设置文本行高*/
text-indent: 30px;/*设置文本缩进*/
}
.box1{color: red; /*设置文本颜色*/
font-size: 30px; /*设置文本大小*/
text-align: right; /*设置文本对齐方式*/
line-height: 75px;/*设置文本行高*/
}
.image{
width: 300px;
height: 400px;/*设置图片宽高*/
border: 3px double grey;/*设置图片边框风格*/
border-radius: 50% 50%;/*设置圆角边框*/
box-shadow: #cccccc 10px 7px 3px;/*设置边框阴影*/
}
</style>
</head>
<body><!--文本信息-->
<div class="box">CSS模型
<div class="box1">--边框（border）</div>
</div>
<br>
<div>
<img src="http://b.hiphotos.baidu.com/image/pic/item/b21bb051f81986181f970fe744ed2e738ad4e685.jpg" class="image">
</div>
</body>
</html>