本文详细介绍了CSS中关于字体样式的属性，如font-weight、font-style和font-family，以及背景属性的应用，包括background-color、background-image、background-size和background-position等。还提到了边框样式和圆角边框的设置方法。
一.文字样式
font-weight：指定字体粗细 -blod normal
font-style：指定字体倾斜 -normal italic(斜体) oblique(倾斜)
font-family：指定字体
<style>
*{
padding: 0;
margin: 0;
}
p{
/* 字体加粗
100-300 更细
400-500 正常
600-900 加粗
bold 加粗 同900
bolder 加粗，强调 同<strong>标签 */
font-weight: bold;
/* 字体倾斜
normal 正常
italic 斜体
oblique 倾斜 （强制倾斜） */
font-style: italic;
font-family: '楷体';
/* 文字阴影
第一个参数；横向偏移量
第二个参数；纵向偏移量
第三个参数：模糊程度
第四个参数；阴影颜色 */
text-shadow: 4px 5px 3px pink;
/* 文本间隔
word-spacing : 单词之间的间隔
letter-spacing： 字间隔， 字母之间的相隔*/
word-spacing: 10px;
letter-spacing: 10px;
/* 指定空白怎么处理
pre 空白会被保留
nowrap 规定不换行， 直到遇到<br> 标签
pre-wrap 保留空白符，能正常换行
pre-line 合并空白符，保留换行符*/
white-space: pre-wrap;
}
</style>
</head>
<body>
<div>
本案例将使用多重背景的方法实现一个信纸的效果本案例将使用多重背景的方法实现一个信纸的效果
</div>
<p>
本案例将使用 多重背景的方法实现一个信纸的效果本案例将使用多重背景的方法实现
一个信纸的效果
本案例将使用多 重背景的方法实现一个信纸的效果本案例将使用多重背景的方法实现一个信纸的效果
本案例将使用多重背 景的方法实现一个信纸的效果本案例将使用多重背景的方法实现一个信纸的效果
本案例将使用多重背景的方 法实现一个信纸的效果
</p>
<p>
Canada - English Canada -
Français Chile Colommmmmmmmmbia Costa Rica
Ecuador Guatemala HondurasHondurasHondurasHondurasHondurasHonduras América
Latina México Nicaragua Panamá
Paraguay Perú Puerto Rico United States Uruguay
</p>
</body>
二.css 背景
background 简写属性，作用是将背景属性设置在一个声明中。
background-attachment 背景图像是否固定或者随着页面的其余部分滚动。scroll 默认
值。/fixed 当页面的其余部分滚动时，背景图像不会移动。
background-color 设置元素的背景颜色。
background-image 把图像设置为背景。
4. vertical-align
三、css背景
- 元素的背景属性
background-position 设置背景图像的起始位置。
left/right/center/bottom/top 这几个属性值可以两两组合使用，如果只规定了一个关键词，
那么 第二个值将时"center"
x% y% 第一个值是水平位置，第二个值是垂直位置。
左上角是 0% 0% 右上角是 100%100%
如果仅规定 了一个值，另一个值是 50
background-repeat 设置背景图像是否及如何重复。
repeat/repeat-x/repeat-y/no-repeat
background-size 规定背景图片的尺寸。
像素/百分比设置宽高。
cover:把背景图像扩展至足够大，以使背景图像完全覆盖背景区域
contain 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。
<style>
div{
width: 400px;
height: 400px;
/* 背景颜色 */
background-color: pink;
background-image: url('../素材/sc17.png')
,url('../素材/sc5.png')
;
/* 平铺方式
repeat：默认，全平铺
repeat-x：横着铺一行
repeat-y：竖着铺一行
no-repeat：不平铺
*/
background-repeat: no-repeat,repeat;
/* 图片大小
1. 百分比
2. cover 横向和竖向都要撑满
3. contain 横向或竖向有一边撑满就满了
*/
background-size: cover;
/* 背景图像是否滚动 */
background-attachment: fixed;
/*
背景图片定位
第一个值：x轴（横向）定位方式
第二个值：y轴（竖向）定位方式
一个值时，默认填充另一个方向为center
1.
top bottom left right center
这五个值两两使用
2.
使用百分比
第一个值是 x轴
第二个值是 y轴
3.
使用固定值
*/
/* background-position: 10% 10%; */
/* 盒子阴影
第一个值：横向偏移量
第二个值：纵向偏移量
第三个值：阴影模糊值
第四个值：阴影外延
第五个值：颜色
第六个值：阴影朝向
*/
box-shadow: 20px 20px 50px 20px red inset;
}
</style>
</head>
<body>
<div>
</div>
</body>
三.css边框
border-width 简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度
常用单位为像素(px)、em。
thin 细的边框。/medium 默认/thick定义粗的边框。
border-style 用于设置元素所有边框的样式，或者单独地为各边设置边框样式。
none 定义无边框。
dotted 定义点状边框。
dashed 定义虚线。
solid 定义实线。
groove定义点状边框。
ridge定义 3D 垄状边框。
inset 定义 3D inset 边框。
outset 定义 3D outset 边框
border-color 简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。
border-bottom 简写属性，用于把下边框的所有属性设置到一个声明中。
border-bottom-color 设置元素的下边框的颜色。
border-bottom-style 设置元素的下边框的样式。
border-bottom-width 设置元素的下边框的宽度。
border-left 简写属性，用于把左边框的所有属性设置到一个声明中。
border-left-color 设置元素的左边框的颜色。
border-left-style 设置元素的左边框的样式。
border-left-width 设置元素的左边框的宽度。
border-right 简写属性，用于把右边框的所有属性设置到一个声明中。
border-right-color 设置元素的右边框的颜色。
border-right-style 设置元素的右边框的样式。
border-right-width 设置元素的右边框的宽度。
border-top 简写属性，用于把上边框的所有属性设置到一个声明中。
border-top-color 设置元素的上边框的颜色。
border-top-style 设置元素的上边框的样式。
border-top-width 设置元素的上边框的宽度。
2. css3新增的边框属性
border-radius 设置所有四个 border-radius 属性的简写属性。
border-top-left-radius 左上角圆角边框。
border-top-right-radius 右上角圆角边框。
border-bottom-right-radius 右下角圆角边框。
border-bottom-left-radius 左下角圆角边框。
值 描述
border-image-source 用在边框的图片的路径
border-image-slice 图片边框向内偏移。
border-image-width 图片边框的宽度
border-image-outset 边框图像区域超出边框的量。
border- image-repeat(stretched) 图像边框是否应平铺(repeated)、铺满(rounded)或拉伸
- 同时设定四个角的圆角。
**分别设定左上 右下、左下 右上圆角。
*** 分别设定左上 、左下 右上、右下圆角。
**** 分别设定左上 、右上、右下、左下圆角。
border-image 设置所有 border-image 属性的简写属性
<style>
.a{
float: left;
margin-right: 30px;
width: 400px;
height: 400px;
/* 边框组合使用 */
/* border: 10px solid #000; */
/* 宽度
固定值
thick：更宽（5px）
thin：更细（1px、视觉上更细）
*/
border-width: 20px;
/* 样式
solid：实线
dotted：点状线
dashed：虚线
groove: 槽线
*/
border-style: solid;
/* 颜色
border-color
* 全部
** 上下 左右
*** 上 左右 下
**** 上 右 下 左
*/
border-color: pink red #000 yellow;
/* 单个方向设
border-方向-属性
*/
/* 圆角 顺时针
* 四个角
** 左上右下 左下右上
*** 左上 右上左下 右下
**** 左上 右上 右下 左下
*/
border-radius: 10px;
border-image: url('./img/sc17.png') 30 30 round;
}
.b{
float: left;
width: 0;
height: 0;
border-width: 400px;
border-style: solid;
border-color: transparent;
border-bottom-color: pink;
border-bottom-width: 800px;
}
</style>
</head>
<body>
<div class="a"></div>
<div class="b"></div>
</body>
扫一扫
439
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
