CSS3的边框(一)

CSS3的边框圆角、边框阴影属性,应用十分广泛,兼容性也相对较好,具有符合渐进增强原则的特征,我们需要重点掌握。主要包括边框圆角,边框图片,边框阴影。

一、边框圆角

圆角处理时,脑中要形成圆、圆心、长半径、短半径的概念,正圆是椭圆的一种特殊情况。

可分别设置长、短半径,以“/”进行分隔,遵循“1,2,3,4”规则,参考手册练习熟悉各种简写方式。

如设置一个圆形,设置div的样式为border-radius: 90px;

border-radius可以同时设置1到4个值。(想想我们之前的margin与padding)如果设置1个值,表示4个圆角都使用这个值。如果设置两个值,表示左上角和右下角使用第一个值,右上角和左下角使用第二个值。如果设置三个值,表示左上角使用第一个值,右上角和左下角使用第二个值,右下角使用第三个值。如果设置四个值,则依次对应左上角、右上角、右下角、左下角(顺时针顺序)。

实现下图所示的半圆形,则需要设置样式height: 90px;

border-radius: 90px 90px 0 0;

表格运用圆角需要要border-collapse: separate;

当圆角半径小于或等于边框宽度时,元素内角是直角

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 1、属性选择器:id选择器 # 通过id 来选择类名选择器 . 通过类名来选择属性选择器 ...
    Yuann阅读 5,583评论 0 7
  • CSS边框属性 元素的边框就是围绕元素内容和内边距的一条或多条线。 元素的边框属性: border 简写属性,用...
    Zd_silent阅读 4,606评论 0 1
  • 话题背景:如今网页展示的姿势是这样的 图片来自:设计之家 炫酷的网页展示,支撑它的正是强大的CSS3,还有什么理由...
    aliensq阅读 6,350评论 0 2
  • 反思 每日记录三件必须完成的事,无意中已经63天了。 回忆这其间,有几天没有记录的? 7月9日正式开始,八月脱落6...
    大麦茶的故事阅读 1,625评论 0 0
  • 待更新
    二两鹿阅读 1,706评论 0 0

友情链接更多精彩内容