CSS3新特性

最新推荐文章于 2024-11-06 20:32:32 发布

年木

最新推荐文章于 2024-11-06 20:32:32 发布

阅读量105

点赞数

分类专栏：前端基础三件套文章标签： css3 css 前端

本文链接：https://blog.csdn.net/yzj_xxj/article/details/126186731

版权

前端基础三件套专栏收录该内容

7 篇文章 0 订阅

订阅专栏

CSS3

 1.径向像渐变
background-image: linear-gradient(rgb(226, 149, 34), transparent), radial-gradient(circle at center bottom, rgb(214, 22, 22) 0%, rgb(221, 44, 44) 10%, blue 10%, blue 20%, pink 20%, pink 30%, yellow 30%, yellow 40%, tomato 40%, tomato 50%,transparent 50%, transparent 100%);
2.线型渐变
   background-image: repeating-linear-gradient(45deg, red 0%, red 10%, blue 10%, blue 20%, yellow 20%, yellow 30%)
3.盒子阴影
box-shadow:X轴的偏移量  Y轴的偏移量  阴影效果虚化程度   阴影大小   颜色 
box-shadow: 0px 0px 10px 10px red inset,0px 15px 10px 10px green;(四周+内外)
4.文字阴影
text-shadow：x轴偏移量   y轴偏移量  阴影虚化程度  颜色；
 text-shadow: 1px 1px 2px  black,-1px -1px 2px  rgb(255, 255, 255);（文字凸起，结合颜色和背景）
 text-shadow: -1px -1px 2px  black,1px 1px 2px  rgb(255, 255, 255);（文字凹陷，结合颜色和背景）
5.box-reflect:倒影方向  倒影和图片之间的距离 [可添加渐变效果] 倒影不占空间，谷歌内核支持。
6.圆角
border-radius：1px 2px 3px 4px;
border-radius的值大于border时，有内半径。

一.过渡  不能对dispaly使用
transition：属性名1  过渡时长  过渡的延迟  速度，属性名2  过渡时长  过渡延迟  速度；

二.转换 （我感觉像脱离了文档流一样）
- **特点：转换后不会影响其他元素**
- **注意：2d转换针对行内元素没有效果，针对（行内）块级元素有效**
1.基点
通过`transform-origin`来控制基点 默认基点为center center  设置像素和百分比是以元素左上角为起点。
transform-origin:x y;  
2.位移   可以设置x、y轴移动
transform : translate(100px,50px);  //X轴向右移动100px，Y轴向下移动50px  可以设置负值
3.旋转  可以设置x、y轴旋转  复合属性旋转一般放在最后。
transform:rotate( 30deg) 默认以z轴旋转， 
4.缩放 
transform：scale（宽度的倍数，高度的倍数）;
transform：scale（倍数）;	//等比缩放
5.倾斜 X、Y轴倾斜
transform : skewX(45deg);

3d转换   **只有位移。缩放和旋转有效**
一、舞台搭建
1.给父级或祖级盒子设置：perspective：1000px；（也可称之为：搭建3d舞台）。
2.在父盒子上设置灭点：perspective-origin:x轴 y轴 z轴；（px、百分比、方向单词）。
3..在 父盒子 上设置：transform-style:preserve-3d; 让里面的子元素在3D舞台里面呈现3D效果。
二、 复合属性空格隔开 ，
每个属性也可想X、Y、Z轴方向单独设置。
1、位移：transfrom：translate3d（x,y,z）
z轴为正值，垂直屏幕向外
2、旋转：transfrom：rotate3d（x,y,z,角度）;
3、缩放：transfrom:scale3d(x,y,z)  //x,y,z轴的缩放比例
z轴进行缩放，控制的元素的厚度，一般看不到效果

animation动画
1.在外部定义关键帧
@keyframes name（动画名称）{
    0%{}
   20%{}
    100%{}
}
2.在对应的css选择器下设置animation属性
 animation: name duration timing-function delay iteration-count direction fill-mode;

响应式布局

引入方式

1.link引入
<!-- link引入样式时可以规定样式作用范围 （媒体类型筛选） print打印机  screen 电子屏幕彩色屏幕  -->
 <link rel="stylesheet" href="css/style.css" media="only print">
2. css样式中规定作用范围
@media 设备类型 and （媒体特性：值）{
}

2.关键字