CSS3边框|学习笔记

简介: 快速学习CSS3边框

发者学堂课程【HTML5 新特性学习CSS3边框】学习笔记,与课程紧密联系,让用户快速学习知识。

课程地址https://developer.aliyun.com/learning/course/396/detail/5053


CSS3边框


CSS3边框:

通过CSS3,您能够创建圆角边框,向矩形添加阴影,使用图片来绘制边框-并且不需使用设计软件,比如PhotoShop。

属性:

border-radius   box-shadow  border-image

浏览器支持:

Internet Explorer 9+支持 border-radius 和 box-shadow 属性。 Firefox、Chrome 以及 Safari 支持所有新的边框属性。

1、创建 index 文件

div1

width:100px;

height :50px;

bo rder :2px solid cadetblue ;

2、圆角效果

div1

width:100px;

height :50px;

bo rder :2px solid cadetblue ;

border-radius: 10px;

3、阴影效果

<div class "div2 " >


相关文章
|
8天前
|
前端开发 容器
css布局-弹性布局学习笔记
这篇文章是关于CSS弹性布局的学习笔记,详细介绍了flex容器和元素的相关属性,包括flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content以及order、flex-grow、flex-shrink、flex-basis、flex和align-self等,解释了这些属性在弹性盒子布局中的作用和用法。
|
25天前
|
Web App开发 前端开发 JavaScript
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
|
2月前
|
前端开发
CSS——通过伪类来自定义四个角边框
CSS——通过伪类来自定义四个角边框
59 3
|
4月前
|
前端开发
CSS中的边框属性:border、border-width、border-color、border-style 详解
CSS中的边框属性:border、border-width、border-color、border-style 详解
212 44
|
2月前
|
前端开发
边框也疯狂:CSS创造令人瞩目的流光闪烁效果!
边框也疯狂:CSS创造令人瞩目的流光闪烁效果!
|
2月前
|
前端开发 容器
边框线条的魔法:CSS动画效果,让网页设计流动起来!
边框线条的魔法:CSS动画效果,让网页设计流动起来!
|
4月前
|
前端开发
css动画效果(边框流光闪烁阴影效果)
css动画效果(边框流光闪烁阴影效果)
|
4月前
|
前端开发 容器
css动画效果(边框线条流动效果)
css动画效果(边框线条流动效果)
|
4月前
|
前端开发 容器
CSS3 新增背景属性 + 新增边框属性(如果想知道CSS3新增背景属性和新增边框属性的知识点,那么只看这一篇就够了!)
CSS3 新增背景属性 + 新增边框属性(如果想知道CSS3新增背景属性和新增边框属性的知识点,那么只看这一篇就够了!)
|
4月前
|
前端开发
CSS基础-盒模型:边框、内边距、外边距
【6月更文挑战第8天】Web设计中的盒模型由内容区域、内边距、边框和外边距组成,是理解页面布局的关键。内容区域包含实际内容,内边距提供间隔,边框定义元素边界,外边距控制元素间距。常见易错点包括边框宽度计算、外边距折叠和盒模型理解不透彻。通过实践和媒体查询可解决响应式设计挑战,`border-radius`可能导致圆角问题。理解盒模型并灵活应用能创建多样化布局。
55 6