文本阴影属性
语法：text-shadow: h-shadow v-shadow blur color;
| 值 | 描述 |
|---|---|
| h-shadow | 必需。水平阴影的位置。允许负值。 |
| v-shadow | 必需。垂直阴影的位置。允许负值。 |
| blur | 可选。模糊的距离。 |
| color | 可选。阴影的颜色。 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
h2{
text-shadow: 5px 5px 5px gray;
}
</style>
</head>
<body>
<h2>文字阴影</h2>
</body>
</html>
注意：可以同时使用多个阴影，中间用逗号隔开
文本换行
- word-wrap：是否允许浏览器在单词内进行断句，这是为了防止当一个字符串太长而找不到它的自然断句点时产生溢出现象
normal：允许的断字点换行（浏览器保持默认处理）
break-word：允许长单词换行到下一行 - word-break ：怎么样进行单词内的断句(open不支持)
break-all：断句的方式非常粗暴，它不会尝试把长单词挪到下一行，而是直接进行单词内的断句。
keep-all：文本不会换行，只能在半角空格或连字符处换行。
@font-face的语法规则
@font-face {
font-family: <YourWebFontName>;
src: <source> [<format>],[<source> [<format>]]*;
[font-weight: <weight>];
[font-style: <style>];
}
- YourWebFontName:此值指的就是你自定义的字体名称，最好是使用你下载的默认字体，他将被引用到你的Web元素中的font-family。如“font-family:“YourWebFontName”;”
- source:此值指的是你自定义的字体的存放路径，可以是相对路径也可以是绝路径；
- format：此值指的是你自定义的字体的格式，主要用来帮助浏览器识别，其值主要有以下几种类型：truetype,opentype,truetype-aat,embedded-opentype,svg等；
- weight和style:这两个值大家一定很熟悉，weight定义字体是否为粗体，style主要定义字体样式，如斜体。
背景属性
background-origin 背景原点(背景图在容器中的起始点)
- padding-box 背景图像填充框的相对位置
- border-box 背景图像边界框的相对位置
- content-box 背景图像的相对位置的内容框
注：默认值为：padding-box;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 400px;
height: 400px;
margin: 30px auto;
font-size: 20px;
color: greenyellow;
padding: 30px;
border: 10px dashed yellow;
background: url(../images/1.png) no-repeat pink;
background-origin: padding-box;
}
</style>
</head>
<body>
<div>padding-box</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 400px;
height: 400px;
margin: 30px auto;
font-size: 20px;
color: greenyellow;
padding: 30px;
border: 10px dashed yellow;
background: url(../images/1.png) no-repeat pink;
background-origin: border-box;
}
</style>
</head>
<body>
<div>border-box</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 400px;
height: 400px;
margin: 30px auto;
font-size: 20px;
color: greenyellow;
padding: 30px;
border: 10px dashed yellow;
background: url(../images/1.png) no-repeat pink;
background-origin: content-box;
}
</style>
</head>
<body>
<div>content-box</div>
</body>
</html>
background-clip 属性规定背景的绘制区域(背景图的裁剪）
- border-box 背景被裁剪到边框盒
- padding-box 背景被裁剪到内边距框
- content-box 背景被裁剪到内容框
注：默认值：border-box;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 400px;
height: 400px;
margin: 30px auto;
font-size: 20px;
color: greenyellow;
padding: 30px;
border: 10px dashed yellow;
background: url(../images/1.png) no-repeat pink;
background-clip: border-box;
}
</style>
</head>
<body>
<div>border-box</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 400px;
height: 400px;
margin: 30px auto;
font-size: 20px;
color: greenyellow;
padding: 30px;
border: 10px dashed yellow;
background: url(../images/1.png) no-repeat pink;
background-clip: padding-box;
}
</style>
</head>
<body>
<div>padding-box</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 400px;
height: 400px;
margin: 30px auto;
font-size: 20px;
color: greenyellow;
padding: 30px;
border: 10px dashed yellow;
background: url(../images/1.png) no-repeat pink;
background-clip: content-box;
}
</style>
</head>
<body>
<div>content-box</div>
</body>
</html>
background-size 背景尺寸
- length (10px) 规定背景图的大小。第一个值宽度，第二个值高度
- Percentage(%) 以百分比为值设置背景图大小
- cover 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域
- contain 把图像图像扩展至最大尺寸，以使其宽度或高度完全适应内容区域
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 400px;
height: 400px;
margin: 30px auto;
font-size: 20px;
color: greenyellow;
padding: 30px;
border: 10px dashed yellow;
background: url(../images/1.png) no-repeat pink;
background-size: 100% 100%;
}
</style>
</head>
<body>
<div>100%,100%</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 400px;
height: 400px;
margin: 30px auto;
font-size: 20px;
color: greenyellow;
padding: 30px;
border: 10px dashed yellow;
background: url(../images/1.png) no-repeat pink;
background-size: 150px 200px;
}
</style>
</head>
<body>
<div>150px 200px</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 400px;
height: 400px;
margin: 30px auto;
font-size: 20px;
color: greenyellow;
padding: 30px;
border: 10px dashed yellow;
background: url(../images/1.png) no-repeat pink;
background-size: cover;
}
</style>
</head>
<body>
<div>cover</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 400px;
height: 400px;
margin: 30px auto;
font-size: 20px;
color: greenyellow;
padding: 30px;
border: 10px dashed yellow;
background: url(../images/1.png) no-repeat pink;
background-size: contain;
}
</style>
</head>
<body>
<div>contain</div>
</body>
</html>
css3多背景属性：以，分隔的方式
例如：background:url(demo.gif) no-repeat ,url(demo1.gif) no-repeat left bottom, url(demo2.gif) no-repeat 10px 15px;
颜色值：red、#0ff、rgb()、rgba()、hsl()、hsla(234,100%,21%,0.5)
色调(Hue)、饱和度(Saturation)、亮度(Lightness)三个颜色通道的改变以及它们相互之间的叠加来获得各种颜色，色调(Hue)色调最大值360，饱和度和亮度有百分比表示0-100%之间
border属性
border-image:url(images/img01.jpg) 25/30px repeat;
-
border-image:url(images/img01.jpg) 100 fill round;
-
border-image 属性是一个简写属性，用于设置以下属性:
- border-image-source 用在边框的图片的路径 - border-image-slice 图片边框向内偏移/切割图片(无单位正整数或百分比)及控制内容区域的fill关键字（将中心的背景填充进元素content） - border-image-repeat 图像边框是否应平铺(repeat)、铺满(round)或拉伸(stretch) - border-image-outset 边框图像区域超出边框的量
border-radius 圆角边框
- border-radius: 5px 10px 20px 50px ;
- border-radius: 20px/10px 以斜杠/分开后面的参数:第一个参数表示圆角的水平半径，第二个参数表示圆角的垂直半径
- border-radius:10px 20px 30px 40px/40px 30px 20px 10px ;按顺时针的顺序，斜杠/左边是四个圆角的水平半径,通常我们很少写右边的参数，那就是默认右边等于左边的值。
border属性案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 250px;
height: 250px;
margin: 30px auto;
}
.box1{
border: 10px solid ;
background: pink;
border-image: url(../images/border.png) 26/26px round;
border-image-outset: 30px;
}
.box2{
background: pink;
border:5px solid yellow;
border-radius: 50%;
background-image: url(../images/a.png);
}
.box3{
width: 300px;
height: 200px;
background: pink;
border:5px solid yellow;
border-radius: 50%;
}
.box4{
width: 200px;
height: 100px;
background: pink;
border:5px solid yellow;
border-radius: 100px 100px 0 0;
}
.box5{
width: 200px;
height: 100px;
background: pink;
border:5px solid yellow;
border-radius: 0 0 100px 100px;
}
.box6{
width: 200px;
height: 200px;
background: pink;
border:5px solid yellow;
border-radius: 200px 0 0 0;
}
.box7{
width: 200px;
height: 200px;
background: pink;
border:5px solid yellow;
border-radius: 0 200px 0 0;
}
.box8{
width: 200px;
height: 200px;
background: pink;
border:5px solid yellow;
border-radius: 0 0 200px 0;
}
.box9{
width: 200px;
height: 200px;
background: pink;
border:5px solid yellow;
border-radius: 0 0 0 200px;
}
.box10{
width: 400px;
height: 200px;
background: pink;
border:5px solid yellow;
border-radius: 100px 100px 0 0;
}
.box11{
width: 200px;
height: 75px;
/* background: pink; */
border-radius: 0 0 50% 50%;
border-bottom: 2px solid #000;
}
</style>
</head>
<body>
<div class="box1">box1box1</div>
<div class="box2">box2box2</div>
<div class="box3">box3box3</div>
<div class="box4">box4box4</div>
<div class="box5">box5box5</div>
<div class="box6">box6box6</div>
<div class="box7">box7box7</div>
<div class="box8">box8box8</div>
<div class="box9">box9box9</div>
<div class="box10">box10box10</div>
<div class="box11">box11box11</div>
</body>
</html>
box-shadow 盒子阴影
box-shadow: 10px 10px 5px 10px #888888 inset;
| 属性值 | 描述 |
|---|---|
| h-shadow | 必需的。水平阴影的位置。允许负值 |
| v-shadow | 必需的。垂直阴影的位置。允许负值 |
| blur | 可选。模糊距离 |
| spread | 可选。阴影的大小 |
| color | 可选。阴影的颜色 |
| inset | 可选。从外层的阴影（开始时）改变阴影内侧阴影，默认是外侧阴影() |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 300px;
height: 200px;
margin: 50px auto;
background: green;
color: #fff;
font-size: 24px;
text-align: center;
line-height: 200px;
box-shadow: 10px 10px 5px 10px #888;
}
</style>
</head>
<body>
<div>盒子阴影</div>
</body>
</html>
扫一扫
575
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
