首页 前端知识 CSS3设置边框

CSS3设置边框

2024-08-14 00:08:28 前端知识 前端哥 719 243 我要收藏

在本章中,您将了解以下的边框属性:

  • border-radius
  • box-shadow
  • border-image

CSS3 圆角

 在div中插入圆角边框

div
{
    /* 设置实线圆角边框,边框大小为2像素,圆角为25像素*/
    border:2px solid;
    border-radius:25px;

}

CSS3 盒阴影

CSS3 中的 box-shadow 属性被用来添加阴影:

div
{
    /* 设置实线圆角边框,边框大小为2像素,圆角为25像素*/
    border:2px solid;
    border-radius:25px;

}

CSS3 边界图片

有了 CSS3 的 border-image 属性,你可以使用图像创建一个边框:

border-image 属性允许你指定一个图片作为边框! 用于创建上文边框的原始图像:

在 div 中使用图片创建边框:

Border

 div
{
    /* 设置边框图片,图片大小为30x30*/
    border-image:url(border.png) 30 30 round;
    -webkit-border-image:url(border.png) 30 30 round; /* Safari 5 and older */
    -o-border-image:url(border.png) 30 30 round; /* Opera */
}

转载请注明出处或者链接地址:https://www.qianduange.cn//article/15448.html
标签
评论
发布的文章

安装Nodejs后,npm无法使用

2024-11-30 11:11:38

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!