css3-01

最新推荐文章于 2023-04-08 23:18:56 发布

小黑不白爱吃糖

最新推荐文章于 2023-04-08 23:18:56 发布

阅读量110

点赞数

分类专栏：查漏补缺文章标签： css3

本文链接：https://blog.csdn.net/qq_41860476/article/details/108974174

版权

查漏补缺专栏收录该内容

16 篇文章 0 订阅

订阅专栏

本文详细介绍了CSS3中的一些重要特性，包括边框的圆角属性`border-radius`、背景的复杂应用、渐变效果的创建（线性渐变和径向渐变）、新的文本属性如`text-shadow`和`text-overflow`，以及`@font-face`规则用于自定义字体。此外，还探讨了2D和3D转换的方法，如旋转、平移和缩放，这些都极大地丰富了网页设计的表现力。

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

重要模块

css3边框

css3圆角属性-border-radius

重要模块

选择器、盒模型、背景和边框、文字特效、2D/3D转换、动画、多列布局、用户界面

css3边框

border-radius:

box-shadow: h-shadow v-shadow blur(模糊距离) spread(阴影尺寸） color insect

border-image:

css3圆角属性-border-radius

四个值：左上右上右下左下

三个值：左上右上&左下右下

两个值：左上&右下右上&左下

属性：

border-top-left-radius：

border-top-right-radius：

border-bottom-right-radius：

border-bottom-left-radius：

border-radius：四个角

css3背景

background-image：可以有多个背景图

background-size：

background-origin：指定了背景图像的位置区域，content-box、padding-box、border-box区域内可以放置背景图像

background-clip：背景剪裁属性从指定位置开始绘制 border-box | padding-box | content-box

css3渐变（Gradients）

线性渐变

background-image：liner-gradient(direction,color-stop1,color-stop2,...)

direaction: to bottom（默认）| to right(向右） | to bottom right（左上-右下）| to top | to left

background-image：liner-gradient(angle,color-stop1,color-stop2);

agle：换算公式 90 - x = y 其中 x 为标准角度，y为非标准角度。

重复的线性渐变：repeating-liner-gradient

径向渐变

background-image：radial-gradient(shape| size |at position, start-color, ..., last-color);

shape：eclipse(默认) | circle

size：closest-side | farthest-side | closest-corner | farthest-corner

重复的径向渐变：repeating-radial-gradient

css3新文本属性

text-shadow：h-shadow(必须) v-shadow(必须） blur(模糊的距离) color

text-overflow：clip(修剪文本） | ellipsis（显示省略符号代表被修剪的文本） | string （使用给定的字符串来代表）

word-break： normal | break-all (允许在单词内换行) | keep-all(只能在半角空格或连字符处换行）

word-wrap： normal（只在允许的断字典换行，默认） | break-word;

text-wrap：normal | none | unrestricted | suppress;

text-justify：

text-outline：

css3字体-@font-face规则

通过font-family属性引用字体名称；用@font-face指向该字体文件
<style> 
@font-face
{
    font-family: myFirstFont;
    src: url(sansation_light.woff);
}
 
div
{
    font-family:myFirstFont;
}
</style>
使用粗体文本：必须添加另一个包含粗体文字的@font-face规则
<style> 
@font-face
{
    font-family: myFirstFont;
    src: url(sansation_light.woff);
}

@font-face
{
    font-family: myFirstFont;
    src: url(sansation_bold.woff);
    font-weight:bold;
}

div
{
    font-family:myFirstFont;
}
</style>
@font-face规则定义

font-family：必需

src：url(必需)

font-stretch：可选

font-style：可选

font-weight：可选

unicode-range：可选

css3 2D转换transform

新转换属性：

transform：使用于2D或3D转换的元素

transform-origin：允许更改转化元素位置

transform： rotate() | scale() | translate（）| skew()

2D变换方法：

平移：translate(x,y)、 translateX(n)、 translateY(n)

旋转：rotate(angle)：默认顺时针旋转

缩放：scale(x,y)、scaleX(n)、 scaleY(n)

倾斜：skew(x-angle，y-angle)、sckewX(angle)、skewY(angle)

matrix()

3D转换transform

转换属性

trasform:

transform-origin:

transform-style：规定被嵌套元素如何在3D空间显示

perspective：规定3D元素的透视效果

perspective-origin:规定3D元素的底部位置

backface-visibility: 定义元素在不面对屏幕时是否可见

3D转换方法：

平移：（translate3d(x,y,z）、translateX(x)、translateY(y)、translateZ(z)）

缩放：（scale3d(x,y,z)、scaleX(x)、scaleY(y)、scaleZ(z）

旋转：（rotate3d(x,y,z,angle)、rotateX(angle）、rotateY(angle)、rotateZ(angle) )

透视视图：perspective(n)