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轮廓和圆角的更多相关文章

  1. css输入框的圆角

    转载:http://jingyan.baidu.com/article/73c3ce28f0b38fe50343d926.html 1.原理是四张圆角的图片放在四个角上,就是圆角矩形的四个角,但这种方 ...

  2. css+div制作圆角矩形的四种方法

    圆角矩形一向是设计师最倾心的一种设计,因为他们可以让整个网页生动起来,不那么死板,所以,作为一个优秀的网页设计师,学会一种或多种编辑圆角矩形的方法是必不可少的,而且圆角矩形应用范围极广,一个网页内的所 ...

  3. CSS：CSS 轮廓（outline）

    ylbtech-CSS:CSS 轮廓(outline) 1.返回顶部 1. CSS 轮廓(outline) 轮廓(outline)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用. ...

  4. CSS如何实现圆角的outline效果？

    一.首先,outline是个很牛逼的东西 温故而知鑫,10年的时候写过一篇可用性方面的文章:“页面可用性之outline轮廓外框的一些研究”,还算挺有用的:3年之后,也就是13年,介绍了个没什么使用价 ...

  5. HTML 学习笔记 CSS(轮廓)

    轮廓(outline)是绘制于元素周围的一条线 位于边框边缘的外围 可起到突出元素的作用 CSS outline属性规定元素轮廓的样式 颜色和宽度 话不多说 来几个例子 看一看 1:在元素周围画线 & ...

  6. CSS样式做圆角

    我处理圆角的版本是由内置的绝对定位的四个div组成,每个div都有唯一的圆角图片作CSS Sprite操作.我们将会这样做:  是什么方式导致这项技术表现得这么了不起呢(What makes this ...

  7. css边框内圆角

    一.使用两个元素实现 html <div class="parent"> <div class="inset-radius">时代峰峻胜 ...

  8. CSS图形——实现圆角

    css实现圆角 css2.1给元素添加圆角是一件很麻烦的事,老办法是用背景图片实现,制作比较麻烦.css3,border-radius的属性,使圆角属性得到完美的解决. 语法 border-radiu ...

  9. CSS border-radius边框圆角

    在CSS3中提供了对边框进行圆角设定的支持,可对边框1~4个角进行圆角样式设置. 目录 1. 介绍 2. value值的格式和类型 3. border-radius 1~4个参数说明 4. 在线示例 ...

随机推荐

  1. reCAPTCHA OCR 详解 , 验验证, OCR（光学自动识别）

    WEB安全专题 ‍‍reCAPTCHA的诞生及意义‍‍ CMU(卡耐基梅隆大学)设计了一个名叫reCAPTCHA的强大系统,让电脑去向人类求助.具体做法是:将OCR(光学自动识别)软件无法识别的文字扫 ...

  2. HTML5 Canvas 2D library All In One

    HTML5 Canvas 2D library All In One https://github.com/search?q=Javascript+Canvas+Library https://git ...

  3. Web Vitals

    Web Vitals https://www.youtube.com/watch?v=2k1QbgLAFdI&feature=youtu.be $ npm i -S web-vitals ht ...

  4. qt 移动窗口MoveWindow

    RECT r; GetWindowRect(this->gameHwnd, &r); // 获取窗口的宽度和高度 int nWidth = r.right - r.left; int n ...

  5. tslint 忽略对某行代码的检测

    tslint rules class Ajanuw { constructor() { console.log("hello ajanuw"); } } // @ts-ignore ...

  6. DOM事件对象用法

    分为三个阶段:事件捕获阶段.目标阶段.事件冒泡阶段. 事件捕获老版本浏览器(IE<=8)不支持,但是事件冒泡可以放心使用. 事件处理程序 一共四类写法,基本都见过,看下写法就知道怎么回事儿了. ...

  7. 【转载】Win10彻底格式化磁盘防止数据恢复的技巧

    转载地址 注意 要尽量删除数据,请在运行cipher /w时关闭其他所有应用程序. 1.如果你在格式化磁盘后想要防止数据被恢复, Format 命令,而现在只需在其后添加 /P 参数,即可用随机数据覆 ...

  8. 生产者和消费者问题(synchronized、Lock)

    1.synchronized的生产者和消费者 synchronized是锁住对象 this.wait()释放了锁 并等待 this.notify()随机通知并唤醒同一个对象中的一个线程 this.no ...

  9. 可以设置过期时间的Java缓存Map

    前言 最近项目需求需要一个类似于redis可以设置过期时间的K,V存储方式.项目前期暂时不引进redis,暂时用java内存代替. 解决方案 1. ExpiringMap 功能简介 : 1.可设置Ma ...

  10. SpringBoot注解集合

    使用注解的优势: 1.采用纯java代码,不在需要配置繁杂的xml文件 2.在配置中也可享受面向对象带来的好处 3.减少复杂配置文件的同时亦能享受到springIoC容器提供的功能 @SpringBo ...