css 带轮廓的圆,CSS轮廓和圆角

1

2

3

4

5

6

7

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

56

57

58

59

60

61

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

时代峰峻胜 ...

CSS图形——实现圆角

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

CSS border-radius边框圆角

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

随机推荐

find xargs exec rm

有时候比如我们删除上万行的文件种的几千行需要怎么做呢 如果配合find 和exec 因为exec有个内存溢出的可能所以一般都会有控制. 例如: find . -name *.log -exec rm ...

Java的IO以及线程练习

文件的IO操作: 字节流: 输入字节流:  InputStream 所有输入字节流的基类,抽象类.  FileInputStream 读取文件的输入字节流.  BufferedInputStream ...

[Spring入门学习笔记][Spring的AOP原理]

AOP是什么? 面向切面编程 软件工程有一个基本原则叫做“关注点分离”(Concern Separation),通俗的理解就是不同的问题交给不同的部分去解决,每部分专注于解决自己的问题.这年头互联网也 ...

IOT表优缺点

IOT表是将所有东西都塞到叶块中,表就是索引,可以避免回表 首先,对于IOT而言,只有索 ...

测试中出现ERROR StatusLogger No log4j2 configuration file

概述 在hibernate框架搭建完成用log4j2进行测试时,总是出现ERROR StatusLogger No log4j2 configuration file found. Using def ...

ZOJ - 1610 经典线段树染色问题

这个是一个经典线段树染色问题,不过题目给的是左右左右坐标,即[0,3]包含0-1这一段 1-2这一段 2-3这一段,和传统的染色不太一样,不过其实也不用太着急. 我们把左边的坐标+1,即可,那么[0, ...

LNMP 目录限制

php.ini 未设置open_basedir和user_ini.filename,但user_ini.filename默认为.user.ini,所以会使用网站根目录下的.user.ini文件来控制 ...

C#跳转网页7种方法

1.Response.Redirect(http://www.baidu.com,false); 目标页面和原页面可以在2个服务器上,可输入网址或相对路径.后面的bool值为是否停止执行当前页. 跳转 ...

彻底解决java WEB项目的文件路径问题(war包)

在j2EE项目中,我们通常会把项目打包公布,通常是war包,作为独立单元,能够远程上传,载入,公布,还能够实现版本号控制,但这与我们开发过程中使用MyEclipse自己主动部署有所不同,下面做具体说明 ...

elasticsearch的服务器响应异常及解决策略(转)

详述: 1 _riverStatus Import_fail 问题描述: 发现有个索引的数据同步不完整,在 http://192.168.1.17:9200/_plugin/head/ 在browse ...