html 画圆的阴影,CSS3(1)---圆角边框、边框阴影
CSS3可以简单理解成是CSS的增强版,它的优点在于不仅有利于开发与维护,还能提高网站的性能。
一、圆角边框
圆角在实际开放过程中,还是蛮常见的。以前基本是通过背景图片做的,有了CSS3后可以使用简单的属性搞定,可以通过border-radius设置元素的圆角半径。
1、圆角边框语法
圆角边框属性 : border-radius
属性值
border-radius: 属性1,属性2,属性3,属性4
# 四个值:第一个值为左上角,第二个值为右上角,第三个值为右下角,第四个值为左下角
border-radius: 属性1,属性2,属性3
# 三个值:上->左右->下
border-radius: 属性1,属性2
# 两个值:上下->左右
border-radius: 属性1
# 一个值:四个圆角值相同
对于每个边角也可以单独写
border-top-left-radius:10px; // 定义了左上角的弧度半径为10px
border-top-right-radius:5px; // 定义了右上角的弧度5px;
border-bottom-right-radius:10px; // 定义了右下角的弧度
border-bottom-left-radius:10px; // 定义了左下角的弧度
2、示例
1)画圆弧
div {
width: 200px;
height: 200px;
background: pink;
border-radius: 50px;
}
运行结果
很明显,这里四个圆弧的半径都为50px;
2)画圆
画圆的思路其实很简单,只要保证两点
1、盒子的长和宽要相等
2、圆弧的半径要为盒子长的一半
比如将上面属性修改为:
border-radius: 100px;
再运行
很明显这里已经是一个圆了。这里我们来思考为什么要设置圆弧设置盒子长的一半。
其实很简单,要实现圆,那么长和宽就应该相等,同时它们的长度就是直径,那么一半就是半径了。
## 二、边框阴影
除了可以为元素的四周设置倒圆角以外,CSS3还为我们提供了阴影的功能,能够制作更为精美的外观。
1、边框阴影语法
语法
box-shadow: h-shadow v-shadow blur spread color inset;
# 前两个属性是必须写的。其余的可以省略。
属性值
2、示例
示例
盒子阴影
div {
width: 200px;
height: 200px;
box-shadow: 2px 2px 2px 2px rgba(0,0,0,0.4);
/*transition: all 1s;*/
}
div:hover { /*鼠标经过div时候的样子。。。*/
box-shadow: 0 15px 30px rgba(255,0,0,0.5);
}
运行结果
``` 你如果愿意有所作为,就必须有始有终。(15) ```
原文出处:https://www.cnblogs.com/qdhxhz/p/11909161.html
html 画圆的阴影,CSS3(1)---圆角边框、边框阴影相关推荐
- 以下css属性可以用来画圆的是,css3 如何画圆
css3画圆的实现方法:首先创建一个HTML示例文件:然后定义一个div,并命名为"circle":最后通过css属性"border-radius"使div实现 ...
- CSS基础「三」盒子模型/产品模块案例/圆角边框/盒子阴影/文字阴影
本篇文章为 CSS 基础系列笔记第三篇,参考 黑马程序员pink老师前端入门教程 其他CSS基础相关文章: CSS基础「一」基础选择器 / 字体属性 / 文本属性 / 三种样式表 CSS基础「二」复合 ...
- CSS盒子模型/PS基操/圆角边框/盒子阴影/文字阴影/案例
CSS 03 1. 盒子模型 1.1 看透网页布局的本质 网页布局过程: 先准备好相关的网页元素,网页元素基本都是盒子 Box . 利用 CSS 设置好盒子样式,然后摆放到相应位置. 往盒子里面装内容 ...
- 10 CSS盒子模型+圆角边框+盒子阴影+文字阴影
1. 盒子模型 1.1 看透网页布局的本质 网页布局过程: 先准备好相关的网页元素,网页元素基本都是盒子 Box . 利用 CSS 设置好盒子样式,然后摆放到相应位置. 往盒子里面装内容. 网页布局的 ...
- CSS3新增属性之圆角、盒阴影、字阴影
CSS3新增属性之圆角.盒阴影.字阴影 人生没有白走的路,每一步都算数. 一.圆角 border-radius:; 取值px % border-radius: 50%; 画一个圆 二.盒阴影 box- ...
- html中的变圆的属性,CSS3属性之圆角效果——border-radius属性
在css3之前,要实现圆角的效果可以通过图片或者用margin属性实现(可以参考这里:http://www.hicss.net/css-practise-of-image-round-box/).实现 ...
- css圆角框四周阴影,css3圆角边框,边框阴影
border-radius向元素添加圆角边框,css3中的.IE9+ chrome safari5+ firefox4+ 现在都支持.可以向input div等设置边框.与border相似,可以四个角 ...
- php 图片圆角透明,CSS_使用CSS3实现圆角,阴影,透明,CSS实现圆角,阴影,透明的方法 - phpStudy...
使用CSS3实现圆角,阴影,透明 CSS实现圆角,阴影,透明的方法很多,传统的方法都比较复杂,用CSS3就方便很多了,虽然现在各浏览器对CSS3的支持还不是很好,但不久的将来CSS3就会普及. 1.圆 ...
- 让IE6、IE7、IE8支持CSS3的圆角、阴影样式
想做个页面用到css3的圆角和阴影效果,但ie浏览器不支持,之前也听说有插件可以实现,周六在网上找到了一个方法,原文如下: 但凡是前端工程师,都知道IE6,IE7,IE8不支持.或者不完全支持CSS3 ...
最新文章
- Datawhale面经项目来了!
- 计算机网络基础与信息安全,大学计算机基础计算机网络基础与信息安全计算机网络概述教案.doc...
- re库、正则表达式基本使用
- 基于Web应用的性能分析及优化案例
- java VM option
- 计算机组成原理平均cpi怎么算_计算机组成原理(一)
- iphone android 传照片,教你如何在两台iPhone之间传照片
- [HDOJ 4889] Scary Path Finding Algorithm [SPFA]
- Flash停更!「偷菜」的快乐还记得吗?
- Pycharm——4 元组和 5 字典
- cmd /c和cmd /k
- 解决vue中父组件传图片路径src给子组件却无法正常显示图片的原因
- 结束时间和开始时间不能大于31天
- 计算机和书桌还有台灯英语,台灯的英语单词是什么
- 世间安得双全法,不负如来不负卿。
- ACM题库以及培养策略
- 2024中国科学技术大学计算机考研信息汇总
- 计算机毕业设计PHP+安卓电影院售票管理APP论文(源码+程序+lw+远程调试)
- 兰卡斯特大学计算机专业世界排名,2019上海软科世界一流学科排名计算机科学与工程专业排名兰卡斯特大学排名第101-150...
- 教程:腾讯云使用WordPress从零开始建站-黑科鸡Blog(一)
热门文章
- 公众号发送的信息中隐藏的电话号码怎么解密
- 第8章第1节:创建演示文稿并设置演示文稿的主题颜色 [PowerPoint精美幻灯片实战教程]
- 【笔记】unity大地图分块加载
- 微型计算机2019年年度盘点,「2019 IT产业市场回顾」光追时代、十代酷睿,2019年笔记本电脑市场年终盘点...
- AAA的原理与配置详解
- Orleans 简介
- Nik Collection 4都包含那些功能的软件
- iOS面向切面的TableView-AOPTableView
- Skin++皮肤控件的使用
- Python的作者及简介