您的位置：首页 > Web前端 > CSS

CSS边框、背景、文本样式

2017-03-24 13:53 459 查看

一、边框



border -radius:20px/15px;—-设置圆角边框，此实例属于椭圆的圆角效果，同时设定了四个圆角，即设置了圆心离边框左右边距离20px，距离上下边15px

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>阿水的阿里</title>
<style type="text/css">
.class1{
width: 800px;
height: 600px;
border-width: 10px;
border-color: blue;
border-style:solid;/*边框的图形*/
border-top-color: black;
border-bottom-color: antiquewhite;
}
</style>
</head>
<body>
<p class="class1">阿水的阿里</p>
</body>
</html>




二、背景



<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>阿水的阿里</title>
<style type="text/css">
.class1{
background-repeat: no-repeat;/*图片不重复*/
background-image: url("bd_logo1.png");
background-attachment: fixed;/*这个属性代表随着页面一起滚动*/
/*  background-size: c
cdb4
over;*//*这个属性一张图覆盖整个网页*/
}
</style>
</head>
<body class="class1">
</body>
</html>


三、文本样式





<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>阿水的阿里</title>
<style type="text/css">
.class1{
text-align: center;
direction: rtl;
letter-spacing: 10px;/*文字间距*/
text-indent: 10px;/*首行缩进*/
text-decoration: underline;
font-family: 微软雅黑;
font-size: 100px;/*字体大小*/
font-style: italic;/*字体倾斜样式*/
font-weight: 800;/*字体粗细100——900*/
text-shadow: 10px 10px 1px red;/*创建文本阴影*/
}
</style>
</head>
<body>
<p class="class1">阿水的阿里</p>
</body>
</html>


内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航