1、圆角效果 border-radius

border-radius: 5px 4px 3px 2px; /* 四个半径值分别是左上角、右上角、右下角和左下角,顺时针 */

不要以为border-radius的值只能用px单位,你还可以用百分比或者em,但兼容性目前还不太好。

实心上半圆:

方法:把宽度(width)设为高度(height)的一半,并且只设置左上角和右上角的半径与元素的高度一致(大于也是可以的)。

实心圆:
方法:把宽度(width)与高度(height)值设置为一致(也就是正方形),并且四个圆角值都设置为它们值的一半。如下代码:

div.circle{
height:100px;/*与width设置一致*/
width:100px;
background:#9da;
border-radius:50px;/*四个圆角值都设置为宽度或高度值的一半*/
}
 
div.semi-circle{
height:100px;
width:50px;
background:#9da;
border-radius:50px 0px 0 50px;
}
 

2、阴影 box-shadow

box-shadow是向盒子添加阴影。支持添加一个或者多个。

很简单的一段代码,就实现了投影效果,酷毙了。我们来看下语法:

box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];

外阴影

.boxshadow-outset{
width:100px;
height:100px;
box-shadow:4px 4px 6px #666;
}
 

内阴影

.boxshadow-inset{
width:100px;
height:100px;
box-shadow:4px 4px 6px #666 inset;
}
 

多阴影

.boxshadow-multi{
width:100px;
height:100px;
box-shadow:4px 2px 6px #f00, -4px -2px 6px #000, 0px 0px 12px 5px #33CC00 inset;
}
 

为边框应用图片 border-image

想象一下:一个矩形,有四个边框。如果应用了边框图片,图片该怎么分布呢? 图片会自动被切割分成四等分。用于四个边框。

可以理解为它是一个切片工具,会自动把用做边框的图片切割。 border-image:url(loo.jpg) 70 70 70 70 repeat; 顺时针,图片切割为70px 单位省略,也可以简写为border-image:url(loo.jpg) 70 repeat;
 repeat参数:repeat的意思就是重复 
Round 参数:Round可以理解为圆满的铺满。为了实现圆满所以会压缩(或拉伸);
Stretch参数:Stretch 很好理解就是拉伸,有多长拉多长。有多远“滚”多远。
#border_image {
margin:0 auto;
height:100px;
line-height:100px;
text-align:center;
font-size:30px;
width:450px;
border:15px solid #ccc;
border-image:url(http://img.mukewang.com/5469bbc60001362706000338-300-170.jpg) 70 repeat; }
请为我镶嵌上漂亮的画框吧

圆角效果 border-radius——阴影 box-shadow——为边框应用图片 border-image的更多相关文章

  1. iOS 高效添加圆角效果实战讲解

    圆角(RounderCorner)是一种很常见的视图效果,相比于直角,它更加柔和优美,易于接受.但很多人并不清楚如何设置圆角的正确方式和原理.设置圆角会带来一定的性能损耗,如何提高性能是另一个需要重点 ...

  2. iOS开发-添加圆角效果高效实现

    圆角(RounderCorner)是一种很常见的视图效果,相比于直角,它更加柔和优美,易于接受.但很多人并不清楚如何设置圆角的正确方式和原理.设置圆角会带来一定的性能损耗,如何提高性能是另一个需要重点 ...

  3. OpenGL阴影,Shadow Volumes(附源程序,使用 VCGlib )

    实验平台:Win7,VS2010 先上结果截图:    本文是我前一篇博客:OpenGL阴影,Shadow Mapping(附源程序)的下篇,描述两个最常用的阴影技术中的第二个,Shadow Volu ...

  4. 个性二维码开源专题<液化/圆角/效果>

    基础方法: ChangeFillShape //修改填充形状 ChangeFillShape(...) // 摘要: // 修改填充形状 // // 参数: // g: // 图形画板 // // F ...

  5. IE6实现图片或背景的圆角效果

    使用ie-css3.htc实现背景圆角效果 <!DOCTYPE html> <html> <head> <meta http-equiv="Cont ...

  6. 使用css3来实现边框圆角效果

    经常看到别人的网站有个边框来修饰文字区域,类似圆角矩形把文字环绕起来,特别有感觉,于是就试着用图片边框来修饰,但是用图片过多会拉慢网页的加载速度,能不能使用css3来实现边框圆角效果呢?当然borde ...

  7. 【实用技巧】去除BootStrap所有圆角效果

    满屏的圆角有没有审"美"疲劳啊?教你一键去除所有圆角效果: * { -webkit-border-radius: 0 !important; -moz-border-radius: ...

  8. css之outline实现圆角效果

    对,你没有看错,outline也可以实现圆角,不过请先读完自然会知道结果: ============================================================== ...

  9. OpenGL 阴影之Shadow Mapping和Shadow Volumes

    先说下开发环境.VS2013,C++空项目,引用glut,glew.glut包含基本窗口操作,免去我们自己新建win32窗口一些操作.glew使我们能使用最新opengl的API,因winodw本身只 ...

随机推荐

  1. PyChram创建虚拟环境

    目录 1. python创建虚拟环境 2. pycharm中添加python虚拟环境 1. python创建虚拟环境 首先要安装virtualenv模块.打开命令行,输入pip install vir ...

  2. jQuery图片从下往上滚动效果

    在线演示 本地下载

  3. asp.net ajax客户端框架如何调用Page Method

    asp.net ajax客户端框架如何调用Page Method 1:欲调用的页面方法必须声明为公有(Public)2:该方法必须为静态方法(static)3:该方法必须添加[System.Web.S ...

  4. SWF在线绘本批量制作高质量PDF的新方法(重点在批量制作)

    SWF在线绘本批量制作高质量PDF的新方法(重点在批量制作) 2012-12-21  未来决定...       http://www.ebama.net/thread-107643-1-1.html ...

  5. JAVA高级特性--String/StringBuffer/Builder

    String String对象一旦创建就不能改变 是常量 需要进行大量字符串操作应采用StringBuffer/StringBuilder  最终结果转换成String对象 StringBuffer ...

  6. Linux下的python安装

    centos7安装python3 以及tab补全功能   1.安装python3 1.1下载python源码包 网址:https://www.python.org/downloads/release/ ...

  7. hdu5289 RMQ+二分

    RMQ预处理最大值,最小值,然后对于每一点,二分可能满足的区间长度,长度-1就是该店开始的区间满足的个数. #include<stdio.h> #include<string.h&g ...

  8. vue vscode属性标签不换行

    "vetur.format.defaultFormatterOptions": { "js-beautify-html": { "wrap_attri ...

  9. 原生js实现复制文本到粘贴板

    项目中经常会遇到点击按钮复制订单号.订单id等内容到粘贴板中的需求.可是通常我们都是用Ctrl + c或右击复制的,别操心,js也是有复制命令的,那就是document.execCommand('co ...

  10. oracle函数 localtimestamp

    [功能]:返回会话中的日期和时间 [参数]:没有参数,没有括号 [返回]:日期 [示例]select localtimestamp from dual; 返回:14-11月-08 12.35.37.4 ...