首页 前端知识 CSS3- css3新增样式(圆角边框border-radius、边框图片border-image、盒子阴影box-shadow)

CSS3- css3新增样式(圆角边框border-radius、边框图片border-image、盒子阴影box-shadow)

2024-10-28 20:10:05 前端知识 前端哥 112 395 我要收藏

?个人主页:王子玉博客

? 收录专栏:HTML&CSS

❤️ 分享网站: 《Python自学网》??基础入门到逐步深入 | 适合新手入门到精通

体系课程:web开发、爬虫、自动化运维、自动化测试、GUI图形界面化

HTML& CSS系列文章类目

内容序列 文章链接
HTML& CSS(1) HTML与HTML5 知识点梳理总结
HTML& CSS(2) CSS - 初识 css(DOM树、引入方式、书写规则)
HTML& CSS(3) CSS - 选择器(一文了解全部选择器及用法)
HTML& CSS(4) CSS - 深入了解(三大特性、css权重、属性值计算过程)
HTML& CSS(5) CSS - 常用样式属性(字体、文本、背景相关、鼠标)

文章目录

    • border-radius:圆角边框
        • 4个值(xy合并参数写法)
        • 全参数写法(了解)
        • 复合和单例写法
        • 1-4个值所对应的顺序
        • 例子
    • border-image: 边框图片(了解)
        • 语法
        • 属性值
    • box-shadow:盒子阴影
        • 语法
        • 属性值
        • 例子

css3 是最新的 css标准,css3 向下兼容css2,利用css3 可以通过更少的代码实现更好的表现,很大程度上节省了JavaScript引擎的开销。


border-radius:圆角边框

为元素添加圆角边框

4个值(xy合并参数写法)
border-radius: 10px 20px 30px 40px; 
border-radius: top-left top-right bottom-right bottom-left;
  • 每个半径的四个值的顺序是:左上角,右上角,右下角,左下角。(顺时针旋转)
全参数写法(了解)
border-radius: 10px 20px 30px 40px / 40px 30px 20px 10px; 

转载请注明出处或者链接地址:https://www.qianduange.cn//article/19392.html
标签
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!