css3 圆角阴影 rgba运动曲线

最新推荐文章于 2024-04-21 10:40:16 发布

冷暖自知···

最新推荐文章于 2024-04-21 10:40:16 发布

阅读量1.4k

点赞数 1

本文链接：https://blog.youkuaiyun.com/weixin_43167531/article/details/85632225

版权

本文深入探讨CSS3的高级应用，包括如何精确设置圆角、实现阴影效果、使用RGBA颜色模型以及掌握各种运动曲线，为网页设计增添动态美感。

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

css3圆角

设置某一个角的圆角，比如设置左上角的圆角：

border-top-left-radius:30px 60px;

同时分别设置四个角：

 border-radius:30px 60px 120px 150px;

设置四个圆角相同：

border-radius:50%;

CSS3阴影

box-shadow：h-shadow v-shadow blur spread color inset;
分别设置阴影：水平偏移 垂直偏移 羽化大小 扩展大小 颜色 是否内阴影

<style type="text/css">
    .box{
        width:200px;
        height:50px;
        background-color:gold;
        /* box-shadow:10px 10px 5px 2px pink inset; */
        box-shadow:10px 10px 5px 2px pink;
    }
</style>
......
<div class="box"></div>

<!-- 给盒子加上了粉红色的阴影 -->

rgba（新的颜色值表示法）

1、盒子透明度表示法：opacity:0.1;filter:alpha(opacity=10)（兼容IE）;
2、rgba(0,0,0,0.1) 前三个数值表示颜色，第四个数值表示颜色的透明度

运动曲线

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>运动曲线</title>
	<style type="text/css">
		div{
			width: 50px;
			height: 50px;
			background-color: gold;
			margin-bottom: 20px;
		}
		div:nth-child(1){
			/*匀速*/
			transition: all 1s linear;
		}
		div:nth-child(2){
			/*开始和结束慢速，中间加速*/
			transition: all 1s ease;
		}
		div:nth-child(3){
			/*开始慢速，结尾突然停止*/
			transition: all 1s ease-in;
		}
		div:nth-child(4){
			/*突然开始，结束时慢速*/
			transition: all 1s ease-out;
		}
		div:nth-child(5){
			/*开始和结束时慢速*/
			transition: all 1s ease-in-out;
		}
		div:nth-child(6){
			/*贝塞尔（贝兹）曲线*/
			/*transition: all 1s cubic-bezier(0.250,0.250,0.750,0.750);匀速*/
			/*超出再缩回的弹性效果*/
			transition: all 1s cubic-bezier(0.470, -0.485, 0.460, 1.435);
		}
		div:hover{
			width: 1000px;
		}
	</style>
</head>
<body>
	<div>linear</div>
	<div>ease</div>
	<div>ease-in</div>
	<div>ease-out</div>
	<div>ease-in-out</div>
	<div>bezier</div>
</body>
</html>