web前端：圆角、边框、背景全

最新推荐文章于 2024-10-31 17:21:13 发布

前端嘻嘻哥

最新推荐文章于 2024-10-31 17:21:13 发布

阅读量1.7k

点赞数

文章标签： css javascript html

本文链接：https://blog.csdn.net/xixi1811/article/details/128395395

版权

web前端基础专栏收录该内容

11 篇文章

订阅专栏

本文详细介绍了CSS中关于边框的设置，包括边框的宽度、样式和颜色，以及如何创建圆角效果。此外，还探讨了box-shadow属性用于添加盒阴影的方法。在背景部分，讲解了如何使用border-image属性创建边界图片，以及如何通过border-radius实现椭圆和圆形的效果。同时，文章还讨论了background-size、background-origin和background-clip属性，用于控制背景图片的大小、定位和裁剪。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

边框

圆角
- border-radius
盒阴影
- box-shadow：5px 5px 10px #0000;
- 阴影水平偏移量、垂直偏移量、模糊程度、颜色
边界图片
- border：15px solid transparent ；
- border-image：url（）填充图片每个的宽高 round；
- round：图像平铺边框
- stretch：图像拉伸填充边框

圆角

border-radius属性
- border-radius：左上角、右上角、右下角、左下角；
- border-radius：左上角、右上+左下角、右下角；
- border-radius：左上+右下角、右上+左下角；
椭圆圆角
- border-radius：50px/15px；椭圆的宽/椭圆的高
- border-radius：50/15 px；同上效果大不同
圆形
- border-radius：50%；

背景

background-size：100% 100%；图片大小
background-origin：；指定了背景图像的位置区域
- content-box 图片填充content
- padding-box 图片填充content+padding（默认值）
- border-box 图片填充content+padding+border
background-clip：；背景裁剪属性：从指定位置开始绘制
- content-box 图片裁剪content
- padding-box 图片裁剪content+padding
- border-box 图片裁剪content+padding+border（默认值）