您的位置：首页 > Web前端 > CSS

CSS中的边框和动画特效

2018-03-12 20:48 169 查看
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>

 
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航