CSS3(上)_background-origin属性来定义背景图片是从什么地方开始平铺的-CSDN博客

本文链接：https://blog.csdn.net/qq_43031583/article/details/119844714

本文详细讲解了CSS3的新选择器、文本样式、颜色样式、边框和背景样式，包括box-shadow、text-shadow、渐变、圆角和背景图片等，并介绍了浏览器私有前缀的使用。此外，还涵盖了CSS3的变形、过渡、动画、多列布局和弹性布局等内容。

摘要由CSDN通过智能技术生成

CSS3

CSS3概述

1. 新选择器
2. 文本样式
3. 颜色样式
4. 边框样式
5. 背景样式
6. CSS3变形
7. CSS3过渡
8. CSS3动画
9. 多列布局
10. 弹性布局
11. 用户界面

浏览器私有前缀

因此对于这些属性来说，部分浏览器都只能识别“带有自身私有前缀的属性”。也就是说，我们在书写CSS3属性的时候，可能需要在属性前面加上浏览器的私有前缀，然后该浏览器才能识别对应的CSS3属性。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-poDIhJMw-1629550017245)(C:\Users\JLong\AppData\Roaming\Typora\typora-user-images\image-20210821194539434.png)]

box-shadow: 5px 5px 10px red;
-webkit-box-shadow: 5px 5px 10px red;
-moz-box-shadow: 5px 5px 10px red;
-ms-box-shadow: 5px 5px 10px red;
-o-box-shadow: 5px 5px 10px red

CSS3选择器

性选择器

<input id="btn" type="button" value="按钮" />

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cbeCbI8S-1629550017249)(C:\Users\JLong\AppData\Roaming\Typora\typora-user-images\image-20210821195040014.png)]

/*匹配doc文件*/
a[href$="doc"]::before
{
content:url("img/1.png");
}
/*匹配pdf文件*/
a[href$="pdf"]::before
{
content:url("img/2.png");
}
/*匹配ppt文件*/
a[href$="ppt"]::before
{
content:url("img/3.png");
}

子元素伪类选择器

1. :first-child、:last-child、:nth-child(n)、:only-child
2. :first-of-type、:last-of-type、:nth-of-type(n)、:only-of-type

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-S1hBa1hD-1629550017251)(C:\Users\JLong\AppData\Roaming\Typora\typora-user-images\image-20210821195259258.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-x8kq4eB0-1629550017253)(C:\Users\JLong\AppData\Roaming\Typora\typora-user-images\image-20210821195325238.png)]

伪类选择器

1. :focus  获取焦点
2. ::selection 选中
3. :checked  选中
4. :enabled和:disabled  可用   不可用
5. :read-write和:read-only

:focus

1. 表单元素（按钮、单选框、复选框、文本框、下拉列表）
2. 超链接

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-t4vWGque-1629550017255)(C:\Users\JLong\AppData\Roaming\Typora\typora-user-images\image-20210821200111398.png)]

::selection 选中

使用鼠标来选取页面的文本内容时，该文本内容都是以“蓝色背景、白色字体”来显示

注意，::selection选择器使用的是双冒号，而不是单冒号。实际上，单冒号往往都是伪类，而双冒号往往都是伪元素。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        div::selection {
            color: white;
            background-color: red;
        }

        p::selection {
            color: white;
            background-color: orange;
        }

        /*兼容Firefox浏览器*/
        div::-moz-selection {
            color: white;
            background-color: red;
        }

        p::-moz-selection {
            color: white;
            background-color: orange;
        }
    </style>
</head>

<body>
    <div>前端开发</div>
    <p>CSS3学习</p>
</body>

</html>

:checked

单选框radio和复选框checkbox都有“选中”和“未选中”这两种状态

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
input:checked {
background-color: red;
}
</style>
</head>
<body>
<form method="post">
性别：
<label><input type="radio" name="gender" value="boy" checked />男</label>
<label><input type="radio" name="gender" value="girl" />女<br /></label>
    你喜欢的水果：<br />
<label><input name="fruit" type="checkbox" checked/>苹果</label>
<label><input name="fruit" type="checkbox" />香蕉</label>
<label><input name="fruit" type="checkbox" />西瓜</label>
<label><input name="fruit" type="checkbox" />凤梨</label>
</form>
</body>
</html>

:enabled和:disabled

表单元素如文本框、单选框、复选框等，都有“可用”和“不可用”这两种状态。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
input:enabled
{
outline:1px solid red;
}
input:disabled
{
background-color:orange;
}
</style>
</head>
<body>
<form>
<p><label for="enabled">可用:</label><input id="enabled" type="text"/>
</p>
<p><label for="disabled">禁用:</label><input id="disabled" type="text"
disabled/></p>
</form>
</body>
</html>

:read-write和:read-only

某些表单元素如单行文本框、多行文本框等，都有“可读写”和“只读”这两种状态。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" /
<title></title>
<style type="text/css">
input:read-write
{
outline:1px solid red;
}
input:read-only
{
background-color:silver;
}
/*兼容Firefox浏览器*/
input:-moz-read-write
{
outline:1px solid red;
}
input:-moz-read-only
{
background-color:silver;
}
</style>
</head>
<body>
<form method="post">
<p><label for="txt1">读写:</label><input id="txt1" type="text" /></p>
<p><label for="txt2">只读:</label><input id="txt2" type="text" readonly
/></p>
</form>
</body>
</html

文本样式

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4bGvcIEb-1629550017256)(C:\Users\JLong\AppData\Roaming\Typora\typora-user-images\image-20210821201330118.png)]

text-shadow

text-shadow: x-offset y-offset blur color;

说明：

x-offset是“水平阴影”，表示阴影的水平偏移距离，单位可以是px、em和百分比等。由于CSS3采用的是W3C坐标系，因此如果值为正，则阴影向右偏移；如果值为负，则阴影向左偏移。

y-offset是“垂直阴影”，表示阴影的垂直偏移距离，单位可以是px、em和百分比等。由于CSS3采用的是W3C坐标系，因此如果值为正，则阴影向下偏移；如果值为负，则阴影向上偏移。 blur是“模糊距离”，表示阴影的模糊程度，单位可以是px、em、百分比等。

blur值越大，则阴影越模糊；blur值越小，则阴影越清晰。此外，blur不能为负值。如果不需要阴影模糊效果，可以把blur值设置为0。

color是“阴影颜色”，表示阴影的颜色。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
div
{
font-size:40px;
text-shadow:4px 4px 2px gray;
}
</style>
</head>
<body>
<div>阴影效果</div>
</body>
</html>

文本描边：text-stroke

所谓的“描边效果”，指的是给文字添加 边框。

text-stroke: width  color;

嵌入字体：@font-face

p{font-family: Arial, Verdana, Georgia;}

@font-face
{
font-family: 字体名称;
src:url(文件路径);
}

CSS渐变

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zaKn2lKu-1629550017257)(C:\Users\JLong\AppData\Roaming\Typora\typora-user-images\image-20210821202155331.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CWtEsz60-1629550017258)(C:\Users\JLong\AppData\Roaming\Typora\typora-user-images\image-20210821202219878.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8BesA4Mr-1629550017259)(C:\Users\JLong\AppData\Roaming\Typora\typora-user-images\image-20210821202243651.png)]

径向渐变

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HhdtH7kL-1629550017260)(C:\Users\JLong\AppData\Roaming\Typora\typora-user-images\image-20210821202404816.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kpwPoc0b-1629550017261)(C:\Users\JLong\AppData\Roaming\Typora\typora-user-images\image-20210821202423525.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lyWOZI04-1629550017262)(C:\Users\JLong\AppData\Roaming\Typora\typora-user-images\image-20210821202503003.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UKV5iqrg-1629550017263)(C:\Users\JLong\AppData\Roaming\Typora\typora-user-images\image-20210821202629136.png)]

\5. 圆角属性

border-radius属性概述

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5WOyQUSA-1629550017264)(C:\Users\JLong\AppData\Roaming\Typora\typora-user-images\image-20210821202720524.png)]

border-radius实现半圆和圆

半圆

<style type="text/css">
div
{
width:100px;
height:50px;
border:1px solid red;
border-radius:50px 50px 0 0;
background-color:#FCE9B8;
}
</style>

圆

<style type="text/css">
div
{
width:100px;
height:100px;
border:1px solid red;
border-radius:50px; /*或者：border-radius: 50%*/
background-color:#FCE9B8;
}
</style>

border-radius实现椭圆

border-radius:x/y;

边框阴影

box-shadow属性简介

box-shadow:x-offset y-offset blur spread color style;

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oASFAKJh-1629550017265)(C:\Users\JLong\AppData\Roaming\Typora\typora-user-images\image-20210821203043024.png)]

四个方向阴影独立样式

box-shadow:左阴影, 上阴影, 下阴影, 右阴影;


<style type="text/css">
body{padding:100px;}
div
{
width:100px;
height:100px;
line-height:100px;
text-align:center;
box-shadow:	-5px 0 12px red,   看  -5px 0
			0 -5px 12px yellow,
			0 5px 12px blue,
			5px 0 12px green;
}
</style>

多色边框

border-top-colors:颜色值;
border-right-colors:颜色值;
border-bottom-colors:颜色值;
border-left-colors:颜色值;

图片边框

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Enn5KvUP-1629550017266)(C:\Users\JLong\AppData\Roaming\Typora\typora-user-images\image-20210821203452533.png)]

背景图片

ackground-size

用background-size属性来定义背景图片的大小，这样可以使得同一张背景图片可以在不同的场景重复使用。

background-size:取值;

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vbUiZ3GH-1629550017266)(C:\Users\JLong\AppData\Roaming\Typora\typora-user-images\image-20210821203616585.png)]

background-origin

使用background-origin属性来定义背景图片是从什么地方开始平铺的，也就是定义背景图片的位置。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NEF1WIgN-1629550017267)(C:\Users\JLong\AppData\Roaming\Typora\typora-user-images\image-20210821203822857.png)]

background-clip属性来剪切背景图片。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-I9ebhze9-1629550017268)(C:\Users\JLong\AppData\Roaming\Typora\typora-user-images\image-20210821203908120.png)]

多背景图片

<style type="text/css">
div
{
width:400px;
height:200px;
border:1px solid silver;
background:url(img/frame1.png) bottom left no-repeat,
url(img/frame2.png) top right no-repeat;
}
</style>

background-origin

使用background-origin属性来定义背景图片是从什么地方开始平铺的，也就是定义背景图片的位置。

[外链图片转存中…(img-NEF1WIgN-1629550017267)]

background-clip属性来剪切背景图片。

[外链图片转存中…(img-I9ebhze9-1629550017268)]

多背景图片

<style type="text/css">
div
{
width:400px;
height:200px;
border:1px solid silver;
background:url(img/frame1.png) bottom left no-repeat,
url(img/frame2.png) top right no-repeat;
}
</style>