CSS3-CSDN博客

本文链接：https://blog.csdn.net/qq_45984813/article/details/104034922

前言：

最近其实有点小忙，要帮家里做事情卖年货呀，可以说是牺牲自己晚上放松的时间来把这章学完的了o(╥﹏╥)o 但还可以撒年后就轻松多了
部分原因：
因为内容html中的代码片较简单就不放了，只放css的代码片，之后会视情况而放，毕竟只是基础。

圆角边框与阴影

怎么说呢，都是为了修饰，所以上手真的挺简单的。

圆角边框

对整体进行设计：border-radius
对部分进行设计：
在这里插入图片描述
紧接着是值得设置：
整体：分别从左上开始紧接着为顺时针依次进行设计
部分：第一个设计的为水平值，第二个为垂直值

区域阴影

我更愿意称之为区域阴影，对比于文本阴影。
设置属性为：在这里插入图片描述
inset和outset为设置的位置，这个具体去尝试即可。

应用

传送带例子：

#tran {
width:350px;
height:50px;
background-color:#9cf;
border:2px solid red;
border-radius:25px;
text-align:center;
margin:100px auto;
line-height:50px;
font-size:30px;
color:blue;
}

阴影例子：

.shadow {
width:300px;
height:100px;
background-color:#f90;
box-shadow: /inset or outset/
10px 10px 5px blue;
/水平偏移垂直偏移模糊距离模糊颜色/
margin:0 auto;
}
ouset：
inset：

文字与文本

同理，一样是为了修饰网页而有的技术，所以不多阐述。
内容分别是文字阴影效果、文字换行、特殊字体的引用

文字阴影效果

文字阴影属性：text-shadow

text-shadow属性的排序：水平偏移垂直偏移阴影大小颜色
text-shadow:2px 2px #FF0000;

文字换行

属性：word-wrap
在这里插入图片描述

特殊字体的引用

规则：
此处为定义字体：
font-family为定义字体的名字为：mvboli
src为字体所在的地址；
格式：括号、单引号、文件名后缀为ttf

引用：

首先在站点文件夹中一定要存有此文件：

具体可以再系统自带的window的文件中的fonts去找，也可以自己去网站下载，格式均为ttf
直接引用即可：

应用

文字阴影的凸起浮雕效果：

h2{
color:white;
text-shadow:2px 2px 6px #000; /凸起浮雕效果/
}

最长文字换行：

p.wdrp{
/em单位名称为相对长度单位/
width:8em;
border:1px solid #333;
word-wrap:break-word;
/作用为将设置的单词多出的部分进行换行/
margin:30px auto;
}
如图：并没有设置高度，可是系统会自动将超出宽度的字母换行显示

特殊字体的引用：

@font-face{
font-family:msjh;
src:url(’…/fonts/msjh.ttf’);
}
@font-face{
font-family:mvboli;
src:url(’…/fonts/mvboli.ttf’);
}
.one{
font-family:msjh;
}
.two{
font-family:mvboli;
}

2D变换

主要包括旋转和缩放

旋转

格式如上，同时角度可以为负

缩放

在这里插入图片描述
第一个值即为水平放大2倍，
第二个值则为垂直放大3倍

应用

有一个当鼠标放入时图片放大的效果：

.box:hover{
transform:scale(1,3);
}

非常简单粗暴

过渡效果和动画效果

我们首先进行概念的区分：
过渡是两个状态之间的转换。
而动画是多个状态之间的转换。

过渡效果

可以整体设置：transition:属性名持续时间过渡方法
单个设置：属性名transition-property 持续时间transition-duration 过渡方法transition-timing-function
属性名包含：单个属性 | 多个属性之间加逗号 | all
过渡方法有：ease：慢快慢； ease-in：慢快； ease-out：快慢；ease-in-out：慢快慢