CSS中的边框和动画特效

最新推荐文章于 2024-07-29 09:17:12 发布

屋外

最新推荐文章于 2024-07-29 09:17:12 发布

阅读量1.9k

点赞数

1 圆角边框：

<style>
	div{
            border:2px solid #a1a1a1;
            padding:10px 40px; 
            background:#dddddd;
            width:300px;
            border-radius:25px;/25px 25px;/25px 25px 25px 分别代表四个圆角公用一个半径/左上与右下以及左上与右上共用半径/左上角的半径
  左上半径，右上角和左下角，右下角使用一个半径      }
</style>

<body>

<div>border-radius 属性允许您为元素添加圆角边框！ </div>
2 阴影边框  与圆角类似将

border-radius:25px;/25px 25px;/25px 25px 25px换成

box-shadow: 20px 10px 100px 100px #888888;分别代表X轴，Y轴，阴影模糊程度，阴影的缩放程度，阴影的颜色。

3 渐变动画

<style> 
    div
    {
        width:100px;
        height:100px;
        background:red;
        transition:width 2s;四个参数分别代表html元素的名称，持续时间，渐变的速度，延迟的时间。
    }
    div:hover
    {
        width:300px;
    }
</style>

<body>
	<div></div>
</body>

4 animation动画

<style> 
    div
    {
        width:100px;
        height:100px;
        background:red;
        animation:myfirst 5s;分别代表动画的名称，动画的持续时间，动画的变化速度，动画延迟多久开始执行

，动画循环执行的次数

}， @keyframes myfirst { 0% {background:red;} 25% {background:yellow;} 50% {background:blue;} 100% {background:green;} }</style><body><div></div></body>