CSS边框(圆角、阴影、背景图片)
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边框(圆角、阴影、背景图片)的更多相关文章
- css网页中设置背景图片的方法详解
在css代码中设置背景图片的方法,包括背景图片.背景重复.背景固定.背景定位等 用css设置网页中的背景图片,主要有如下几个属性: 1,背景颜色 {">说明:参数取值和颜色属性一样 ...
- 不用css样式表和背景图片实现圆角矩形,超简洁!
当网站页面的整体布局设计好后,接下来有很多细节的实现是很让人头疼的.其中之一就是圆角矩形的实现. 在网上看了很多圆角矩形的实现方法,基本有两种,一种是用纯css实现,不需要背景图片:另一种是用背景图像 ...
- CSS background-color 、image 背景图片
背景颜色 background-color 语法: background-color:<color> 默认值:transparent 透明 适用于:所有元素 继承性:无 动画性:是 计算 ...
- CSS hack前传——背景图片全屏
在之前的博客CSS hack中我有提到,一个问题的解决让我对CSS hack的态度从不屑一顾,到认真研究了实验一下,事情是这样的,最近产品发布,向来狂妄的我被一个bug纠缠住了,甚至丧气的表示我做不出 ...
- IE9以下通过css让html页面背景图片铺满整个屏幕
第一种方法不设为背景图片,通过css来控制样式,可兼容到IE6,代码如下: <!DOCTYPE html> <html lang="en"> <hea ...
- 【CSS学习笔记】背景图片
直接看代码: background: blue; /*页面背景为蓝色,很简单的代码*/background-image:url(small.jpg); /*页面背景是名字叫small.jpg的图片*/ ...
- 用css来写一个背景图片的切换
代码如下: <!DOCTYPE HTML> <htmllang="en-US"> <head> <meta charset="U ...
- vue打包后CSS中引用的背景图片不显示问题
vue项目中,在css样式中引用了一张背景图片,开发环境下是可以正常显示,build之后背景图片不显示. 解决方法: 找到build/utils.js文件 修改成为如下所示内容: 添加红框中的内容即 ...
- CSS——精灵图与背景图片定位
精灵图产生背景: 1.网页上的每张图像都需要向服务器发送一次请求才能展现给用户.2.网页上的图像过多时,服务器就会频繁地接受和发送请求,大大降低页面的加载速度.为了有效地减少服务器接受和发送请求的次数 ...
- 2014辛星在读CSS第八节 使用背景图片
这应该是系统CSS本教程的最后一节,为什么,由于本节.我觉得基础已经完成,接下来的就是无休止的战斗,战斗非常难用知识讲出来,通过积累,战斗经验.这些都不是说出来. 伟大,下来说一下用CSS加入背景图片 ...
随机推荐
- Mavnen的几种依赖关系
学习mavnen的时候有几种依赖关系 首先,说一下maven的依赖关系用来干什么? 就是用来控制编译.测试.运行三种classpath的关系 1.compile 的范围 当依赖的scope为compi ...
- 谈谈this对象
通过平常的使用简单总结了一下不同形式的函数调用下this的指向,函数的调用形式决定了this的指向.就简单分析一下以下几种情况: 情况一:纯粹的函数调用 eg: var x=1; function f ...
- jQuery之stop()
开启第一篇原创博客,内容朴实,但绝对属实. 先来看看w3c的定义和语法: 定义:stop() 方法停止当前正在运行的动画. 语法:$(selector).stop(stopAll,goToEnd) 参 ...
- Ubuntu下的iptux和Windows下的飞秋互传文件
1.问题 当Linux下的iptux是安装源里的版本时,存在下面的问题:Windows下的飞秋可以向Linux下的iptux发送文件,iptux接受正常Linux下的iputx给Windows下的飞秋 ...
- Here文档
Here文档为需要输入的程序,例如,mail.sort和cat等接收在线文本,直到遇到用户定义的结束符号为止.最常用的用户是在Shell脚本中和case命令一起创建菜单.自动登录等等. 1.建立菜单 ...
- Ubuntu17.04配置LNMP(Nginx+PHP7+MySQL)简单教程 快速 易学 简单易懂
我安装的是当前最新的Ubuntu版本17.04,在虚拟机中先试用一下,如果没有什么不稳定的现象,准备以后作为主力操作系统 Ubuntu属于Debian系的Linux系统,拥有着一个很NB的软件包管理器 ...
- 身份证识别OCR,开启视频模式扫一扫即可识别身份证信息
文章摘要:身份证识别等证件识别OCR技术在各个行业得到广泛应用,例如:车险移动查勘会用到身份证识别.行驶证识别.车架号识别: 寿险移动展业会用到名片识别.银行卡识别:电信实名制代理网点采集身份证信息会 ...
- Swift计算字符数量
通过调用全局 countElements 函数并将字符串作为参数进行传递可以获取该字符串的字符数量. let unusualMenagerie = "Koala
- 使用dns批量管理普通主机名相关问题
1.dns配置 日常管理主机过程中,会有很多地方需要使用到主机名的,当主机非常多的时候,就不适合使用hosts来管理和同步的所有主机hosts了,这个时候就可以使用dns来管理主机名映射和变动 dns ...
- ASP.NET WEB API 自定义模型校验过滤器
对外公开WEB接口时,对模型校验是常见的安全常识,常见的写法是在controller中判断ModelState.IsValid,以注册用户API为例. Model: public class Regi ...