Python项目-Day33-border-box-shadow-线性渐变-transition(过渡动画)-flex布局

最新推荐文章于 2024-12-14 23:21:47 发布

qq_37892223

最新推荐文章于 2024-12-14 23:21:47 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： web

本文链接：https://blog.youkuaiyun.com/qq_37892223/article/details/82185602

web 专栏收录该内容

12 篇文章

订阅专栏

此博客聚焦Python项目Day33，介绍了CSS多种样式与布局。包括border、border-image等边框样式，box-shadow、text-shadow等阴影设置，还有文本裁剪、描边，线性渐变，transform属性，过渡动画、关键帧动画，以及flex布局等内容，还提及浏览器兼容问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Python项目-Day33-border-box-shadow-线性渐变-transition(过渡动画)-flex布局

border(边框圆角样式的设置)

border-top-left-radius
border-top-right-radius
border-bottom-left-radius
border-bottom-right-radius
border-radius

以上样式分别设置单边或者多边，半径大小可以使用px、百分比和em

border-top-left-radius:10px
border-top-left-radius:20px 10px;
border-radius:50% 20px 25% 5em/25% 15px 40px 55%

border-image(边框图像的设置)

将图片分割成为九个部分，四个角上的图像作为边框的四个顶点，其余部分作为边框的四边

例如:
```
border-image:url(/i/border.png) 30 30 stretch;
```

box-shadow(阴影样式的应用)

格式:box-shadow：hoffset voffset blur spread
color inset

例如:

box-shadow: 10px 10px 10px 50px red inset;

/*阴影水平偏移10px 垂直偏移 模糊值10px  延伸速度/半径50px  阴影颜色为red 内嵌到盒子内部*/

text-shadow(文本阴影设置)

例如:
```
text-shadow: 5px 5px 5px grey;
```
text-overflow(文本裁剪)

参数名说明
clip 不使用省略号作为结尾
ellipsis 使用省略号作为结尾

要想做到文本裁剪的效果,必须要满足:
- 必须不换行(white-space)
- 必须使用overflow控制溢出
例如:
```
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
```
text-stroke(文本描边)

格式:text-stroke：描边宽度描边颜色；

注意:
- 该样式不是所有的浏览器都支持
- 需要添加前缀修饰符
例如:
```
-webkit-text-stroke: 1px yellow;
```
css前缀
- 优雅降级 - 先满足新的浏览器的设计方式
- 逐渐增强 - 先满足普通浏览器的设计方式
- 优雅降级适合新版本浏览器
- 渐进增强适合老版本浏览器
  
  测试浏览器兼容的网站
例如:
```
//优雅降级

-o-border-image: url("");
-webkit-border-image: url("");
border-image: url("");

//主键增强

border-image: url("");
-o-border-image: url("");
-webkit-border-image: url("");
```

参数名	说明
clip	不使用省略号作为结尾
ellipsis	使用省略号作为结尾

线性渐变

格式:background：linear-gradient(方向，颜色1，颜色2 。。。)；

例如:

#grad1 {
    height: 200px;
    background: -webkit-linear-gradient(left, red , blue); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(right, red, blue); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(right, red, blue); /* Firefox 3.6 - 15 */
    background: linear-gradient(to right, red , blue); /* 标准的语法（必须放在最后） */
}

关于颜色渐变

transform属性

例如:
```
transform:  translate(200px,202px) skew(45deg);
```
tramsform-origin属性:

该属性用于改变变形的基准点，默认在中心，用空格间隔

例如:
```
transform-origin: 0% 40%;
```
transition(过渡动画)

过渡是一种js事件触发的动画效果的方式,例如click,hover,foucs,checked等事件

格式:transition：控制的属性1 动画持续时间动画效果延迟时间；

例如:
```
transition：background-color  1s  ease 0s；
transition：color  1s  linear  1.0s；
transition：all  1s  ease 0s；
```

关键帧动画

利用类似于Flash的关键帧进行控制的动画方式，比过渡动画功能更加强大

动画原理

利用@keyFrames创建关键帧动画

利用animation调用关键帧动画

代码举例:

/*change是关键帧名*/
@keyframes change {
        0%{
            background-color: red;
        }
        50%{
            background-color: purple;
        }
        100%{
            background-color: lime;
        }

    }
    .div-02:hover{
    /*animation属性实现change效果*/
        animation: change 2s linear;
    }

flex布局详解