css3边框

  border-radius:创建圆角

div
{
border:2px solid;
border-radius:25px;      //25px为圆角半径
}

  圆角可以单设

  • 四个值: 第一个值为左上角,第二个值为右上角,第三个值为右下角,第四个值为左下角。
  • 三个值: 第一个值为左上角, 第二个值为右上角和左下角,第三个值为右下角
  • 两个值: 第一个值为左上角与右下角,第二个值为右上角与左下角
  • 一个值: 四个圆角值相同

  box-shadow:添加阴影

div
{
box-shadow: 10px 10px 5px #888888;    //X轴、Y轴、Z轴、颜色
}

  border-image:添加图片

div
{
border-image:url(border.png) 30 30 round;
}

 

转载于:https://www.cnblogs.com/zyfeng/p/10482280.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
你可以使用CSS3中的动画属性和边框属性来实现边框线条流动动画。以下是一个基本的示例代码: ``` <!DOCTYPE html> <html> <head> <title>CSS3 Border Animation</title> <style> .border-animation { width: 200px; height: 200px; border: 3px solid #000; animation: border-anim 2s infinite; } @keyframes border-anim { 0% { border-top: 3px solid #000; border-right: 3px solid #000; border-bottom: none; border-left: none; } 25% { border-top: none; border-right: 3px solid #000; border-bottom: 3px solid #000; border-left: none; } 50% { border-top: none; border-right: none; border-bottom: 3px solid #000; border-left: 3px solid #000; } 75% { border-top: 3px solid #000; border-right: none; border-bottom: none; border-left: 3px solid #000; } 100% { border-top: 3px solid #000; border-right: 3px solid #000; border-bottom: 3px solid #000; border-left: none; } } </style> </head> <body> <div class="border-animation"></div> </body> </html> ``` 在上面的代码中,我们定义了一个样式类`.border-animation`,并设置了其宽度、高度和3像素的黑色边框。接着,我们使用CSS3中的`animation`属性来定义动画,指定了`border-anim`关键帧动画和2秒的动画持续时间,并设置`infinite`表示无限循环播放。 在关键帧动画`border-anim`中,我们使用了五个关键帧来控制边框线条的变化。每个关键帧中,我们可以指定边框的样式和颜色,以及哪些边框线条需要显示或隐藏。 这个例子中,我们通过不同的组合方式来交替显示边框线条,从而实现了流动动画的效果。你可以根据需要调整关键帧中的样式和时间间隔来实现不同的动画效果。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值