1.圆角

 border-radius是向元素添加圆角边框。

使用方法:

border-radius:10px; /* 所有角都使用半径为10px的圆角 */

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

实心圆:

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

实心上半圆:

div{
height:50px;/*是width的一半*/
width:100px;
background:#9da;
border-radius:50px 50px 0 0;/*半径至少设置为height的值*/
}

2.阴影

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

阴影模糊半径:此参数可选,其值只能是为正值,如果其值为0时,表示阴影不具有模糊效果,其值越大阴影的边缘就越模糊;

阴影扩展半径:此参数可选,其值可以是正负值,如果值为正,则整个阴影都延展扩大,反之值为负值时,则缩小;

向盒子添加阴影,投影方式可为内部或外部,inset为内部,默认为外部

示例代码:

.box_shadow{
box-shadow:4px 2px 6px #333333;
}

3.边框
background:url(xx.jpg) 10px 20px repeat;
//10px 20px为切割图片的宽度,图片延伸方式有三种:repeat、round(平铺)、stretch(拉伸)

CSS边框(圆角、阴影、背景图片)的更多相关文章

  1. css网页中设置背景图片的方法详解

    在css代码中设置背景图片的方法,包括背景图片.背景重复.背景固定.背景定位等   用css设置网页中的背景图片,主要有如下几个属性: 1,背景颜色 {">说明:参数取值和颜色属性一样 ...

  2. 不用css样式表和背景图片实现圆角矩形,超简洁!

    当网站页面的整体布局设计好后,接下来有很多细节的实现是很让人头疼的.其中之一就是圆角矩形的实现. 在网上看了很多圆角矩形的实现方法,基本有两种,一种是用纯css实现,不需要背景图片:另一种是用背景图像 ...

  3. CSS background-color 、image 背景图片

    背景颜色 background-color 语法: background-color:<color> 默认值:transparent  透明 适用于:所有元素 继承性:无 动画性:是 计算 ...

  4. CSS hack前传——背景图片全屏

    在之前的博客CSS hack中我有提到,一个问题的解决让我对CSS hack的态度从不屑一顾,到认真研究了实验一下,事情是这样的,最近产品发布,向来狂妄的我被一个bug纠缠住了,甚至丧气的表示我做不出 ...

  5. IE9以下通过css让html页面背景图片铺满整个屏幕

    第一种方法不设为背景图片,通过css来控制样式,可兼容到IE6,代码如下: <!DOCTYPE html> <html lang="en"> <hea ...

  6. 【CSS学习笔记】背景图片

    直接看代码: background: blue; /*页面背景为蓝色,很简单的代码*/background-image:url(small.jpg); /*页面背景是名字叫small.jpg的图片*/ ...

  7. 用css来写一个背景图片的切换

    代码如下: <!DOCTYPE HTML> <htmllang="en-US"> <head> <meta charset="U ...

  8. vue打包后CSS中引用的背景图片不显示问题

    vue项目中,在css样式中引用了一张背景图片,开发环境下是可以正常显示,build之后背景图片不显示. 解决方法: 找到build/utils.js文件 修改成为如下所示内容:  添加红框中的内容即 ...

  9. CSS——精灵图与背景图片定位

    精灵图产生背景: 1.网页上的每张图像都需要向服务器发送一次请求才能展现给用户.2.网页上的图像过多时,服务器就会频繁地接受和发送请求,大大降低页面的加载速度.为了有效地减少服务器接受和发送请求的次数 ...

  10. 2014辛星在读CSS第八节 使用背景图片

    这应该是系统CSS本教程的最后一节,为什么,由于本节.我觉得基础已经完成,接下来的就是无休止的战斗,战斗非常难用知识讲出来,通过积累,战斗经验.这些都不是说出来. 伟大,下来说一下用CSS加入背景图片 ...

随机推荐

  1. C语言集成开发环境vs2017的使用技巧之修改快捷键

    首先这里是说编辑C语言内容,其次开发环境是vs2017(全称:visual studio 2017).像这个开发环境体积大,但你安装的时候不要安装到C盘,然后安装的时候选择模块,比如你不开发网站,就先 ...

  2. 关于AD9516芯片的硬件设计和FPGA程序编写心得

    最近在做一个项目,其中有涉及时钟芯片AD9516的硬件设计和软件编程,有些使用心得,供大家参考讨论. AD9516,这是一个由ADI公司设计的14路输出时钟发生器,具有亚皮秒级抖动性能,还配有片内集成 ...

  3. C++将一个数组内容赋给另一个数组

    有两种方式: 一.进行数组遍历,依次赋值 ] = { , , , , }; ] ={ }; ;i<sizeof(arr1)/sizeof(int);i++) arr2[i] = arr1[i] ...

  4. 关于MyEclipse修改项目名称后,部署到tomcat显示旧的项目名称

    问题:用Myeclipse部署项目的时候,     出现部署到tomcat下的项目是之前的项目,而不是当前的项目.   解决方案:工程名->右键->Properties->MyEcl ...

  5. MiniProfiler使用点滴记录-2017年6月23日11:08:23

    1.看似针对同样一段查询表ef达式,重复执行却没有被记录下来.其实这是正常情况,因为ef并没有重复去执行 相同sql查询. 2.MiniProfiler结合MVC过滤器进行 拦截记录Sql,示例代码: ...

  6. 关于MATLAB处理大数据坐标文件201761

    前几天备战考试,接下来的日子将会继续攻克大数据比赛 虽然停止了一段时间没有提交数据,但是这几天的收获还是有的,对Python 随机森林了解的更了解了 随机森林是由多课决策树组成(当然这个虽然我们初学者 ...

  7. AI相关 TensorFlow -卷积神经网络 踩坑日记之一

    上次写完粗浅的BP算法 介绍 本来应该继续把 卷积神经网络算法写一下的 但是最近一直在踩 TensorFlow的坑.所以就先跳过算法介绍直接来应用场景,原谅我吧. TensorFlow 介绍 TF是g ...

  8. PHP加密解密数字

    <?php /** * 加密解密类,PHP加密解密数字,适用于URL加密 * 该算法仅支持加密数字.比较适用于数据库中id字段的加密解密,以及根据数字显示url的加密. * @version a ...

  9. workday1

    前天是实习的第一天,现在补下感想 总的来说还是不错的,师兄很nice,师妹很羞涩,我很尴尬,我的交际能力还是有待提高(主要是普通话不标准~~~~(>_<)~~~~) 早上由华工C12穿梭到 ...

  10. JAVAEE——SSH三大框架整合(spring+struts2+hibernate)

    一.整合原理 二.导包(41个) 1.hibernate (1)hibernate/lib/required (2)hibernate/lib/jpa | java persist api java的 ...