css3边框

CSS3边框圆角《border-radius》-------一个设置所有四个边框-*-半径属性的速记属性

《border-top-left-radius》定义左上角弧度

《border-top-right-radius》定义右上角弧度

《border-bottom-left-radius》定义左下角弧度

《border-bottom-right-radius》定义右下角弧度

如果你在 border-radius 属性中只指定一个值,那么将生成 4 个 圆角.

但是,如果你要在四个角上一一指定,可以使用以下规则:

四个值: 第一个值为左上角,第二个值为右上角,第三个值为右下角,第四个值为左下角。

三个值: 第一个值为左上角, 第二个值为右上角和左下角,第三个值为右下角

两个值: 第一个值为左上角与右下角,第二个值为右上角与左下角

一个值: 四个圆角值相同

例:border-radius:10px;

CSS3盒阴影《box-shadow》------------复制一个或多个下拉框的阴影

例:box-shadow:10px 5px 15px 20px #000

第一个值是控制左右的阴影,第二个值是控制上下的阴影,第三个值是控制阴影程度,第四个值是控制阴影面积,最后一个是阴影的颜色。

CSS3边框图片《border-image》-------设置所有边框图像的速记属性

例:border-image:url(img/无标题.png) 30 30 round;

url  图片的路径    第一个值是上下的拉伸,第二个值是左右的拉伸 

round图像平铺(重复)来填充该区域。

stretch图像被拉伸以填充该区域。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 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、付费专栏及课程。

余额充值