CSS轮廓和圆角
1
2 <!DOCTYPE html>
3 <html lang="en">
4 <head>
5 <meta charset="UTF-8">
6 <title></title>
7 <style>
8 .box1{
9 width:100px;
10 height:100px;
11 background-color:#bfa;
12 padding:10px;
13
14 /*
15 box-shadow用来设置元素的阴影效果，阴影不会影响页面布局
16 第一个值:水平偏移量 设置阴影的水平位置
17 第二个值:垂直偏移量 设置阴影的垂直位置
18 第三个值:阴影的迷糊半径
19 第四个值:阴影的颜色
20 */
21 box-shadow:0px 0px 50px rgba(0,0,0,.5)
22
23
24 /*
25
26 outline 用来设置元素的轮廓线和border的用法一样
27 不同点：轮廓不会影响页面的布局
28 */
29 }
30 .box2{
31 width:100px;
32 height:100px;
33 background-color:orange;
34
35 /*
36 border-radius用来设置圆角
37 border-top-left-radius
38 border-top-right-radius
39 border-bottom-left-radius
40 border-bottom-right-radius
41 border-radius 可以指定四个圆角的圆角
42 -四个值：左上，右上，右下，左下
43 -三个值左上，右上/左下，右下
44 -两个值:左上右下，右上左下
45 (对角的公用)
46 */
47
48 @sC/*
49 border-radius:10px / 40px;;
50 将元素设置为一个圆形】
51 */
52 border-radius:50%;
53
54 }
55 </style>
56 </head>
57 <body>
58 <div class="box1"></div>
59 <div class="box2"></div>
60 </body>
61 </html>
CSS轮廓和圆角的更多相关文章
- css输入框的圆角
转载:http://jingyan.baidu.com/article/73c3ce28f0b38fe50343d926.html 1.原理是四张圆角的图片放在四个角上,就是圆角矩形的四个角,但这种方 ...
- css+div制作圆角矩形的四种方法
圆角矩形一向是设计师最倾心的一种设计,因为他们可以让整个网页生动起来,不那么死板,所以,作为一个优秀的网页设计师,学会一种或多种编辑圆角矩形的方法是必不可少的,而且圆角矩形应用范围极广,一个网页内的所 ...
- CSS：CSS 轮廓（outline）
ylbtech-CSS:CSS 轮廓(outline) 1.返回顶部 1. CSS 轮廓(outline) 轮廓(outline)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用. ...
- CSS如何实现圆角的outline效果？
一.首先,outline是个很牛逼的东西 温故而知鑫,10年的时候写过一篇可用性方面的文章:“页面可用性之outline轮廓外框的一些研究”,还算挺有用的:3年之后,也就是13年,介绍了个没什么使用价 ...
- HTML 学习笔记 CSS(轮廓)
轮廓(outline)是绘制于元素周围的一条线 位于边框边缘的外围 可起到突出元素的作用 CSS outline属性规定元素轮廓的样式 颜色和宽度 话不多说 来几个例子 看一看 1:在元素周围画线 & ...
- CSS样式做圆角
我处理圆角的版本是由内置的绝对定位的四个div组成,每个div都有唯一的圆角图片作CSS Sprite操作.我们将会这样做: 是什么方式导致这项技术表现得这么了不起呢(What makes this ...
- css边框内圆角
一.使用两个元素实现 html <div class="parent"> <div class="inset-radius">时代峰峻胜 ...
- CSS图形——实现圆角
css实现圆角 css2.1给元素添加圆角是一件很麻烦的事,老办法是用背景图片实现,制作比较麻烦.css3,border-radius的属性,使圆角属性得到完美的解决. 语法 border-radiu ...
- CSS border-radius边框圆角
在CSS3中提供了对边框进行圆角设定的支持,可对边框1~4个角进行圆角样式设置. 目录 1. 介绍 2. value值的格式和类型 3. border-radius 1~4个参数说明 4. 在线示例 ...
随机推荐
- Leetcode（206）-反转链表
反转一个单链表. 示例: 输入: 1->2->3->4->5->NULL 输出: 5->4->3->2->1->NULL 思路:反转链表很简 ...
- vuepress & package.json lock version
vuepress & package.json lock version npm 锁版 bug npm lock version holy shit { "name": & ...
- 使用 js 实现一个简易版的动画库
使用 js 实现一个简易版的动画库 具有挑战性的前端面试题 animation css refs https://www.infoq.cn/article/0NUjpxGrqRX6Ss01BLLE x ...
- js inheritance all in one
js inheritance all in one prototype & proto constructor Object.definepropety Object.create() js ...
- Flutter & release an iOS app
Flutter & release an iOS app https://flutter.dev/docs/deployment/ios .ipa https://en.wikipedia.o ...
- 手机 wifi 已连接，不可上网 bug
手机 wifi 已连接,不可上网 bug 同一个 Wi-Fi,电脑却可以? 注意事项 Mac 共享热点支持有线连接.蓝牙连接的网络进行共享. 如果你的 Mac 本身是通过 wifi 来连接上网的,那就 ...
- 专利 & 发明专利 & 专利查询
专利 & 发明专利 & 专利查询 PDF 文档中表格解析的方法.系统.存储介质及电子设备 中国专利公布公告 http://epub.sipo.gov.cn/index.action 中 ...
- NGK又双叒叕送钱了！百万SPC空投不要错过!
不知不觉,2021年已然到来.回顾过去一年,2020年币圈发生的事情真的是太多太多,比特币的持续暴涨,DeFi一波又一波的空投福利,都让我们见识了区块链的魅力!同样,2021年区块链市场的牛市仍然持续 ...
- Mila Fletcher ：其实高度自律的人生并没有那么难养成
在日常生活中,我们经常会发现,不论是学习,考证,工作,都需要坚持付出.但是很多人都没有办法在枯燥的学习过程中持续下去,这通常是因为不够自律导致的.但是尽管大家都知道自律是多么重要,却没有几个人可以真正 ...
- 行业动态 | Apache Pulsar 对现代数据堆栈至关重要的四个原因
与 Kafka 相比,Pulsar 的架构使它在跨地域复制.扩展.多租户和队列等方面具有重要的优势. 1 月 27 日,DataStax 宣布收购Kesque(Pulsar 即服务),加入到了 P ...