#8.11.16总结#CSS常用样式总结（二）
border 边框
简写：border:1px solid #000;
等效于：border-width:1px;border-style:solid;border-color:#000;
顺序：border-width | border-style | border-color
border-style
border-radius 圆角半径
设置或检索对象使用圆角边框。提供2个参数，2个参数以“/”分隔，每个参数允许设置1~4个参数值，第1个参数表示水平半径，第2个参数表示垂直半径，如第2个参数省略，则默认等于第1个参数
- 水平半径：如果提供全部四个参数值，将按上左(top-left)、上右(top-right)、下右(bottom-right)、下左(bottom-left)的顺序作用于四个角。
- 如果只提供一个，将用于全部的于四个角。
- 如果提供两个，第一个用于上左(top-left)、下右(bottom-right)，第二个用于上右(top-right)、下左(bottom-left)。
- 如果提供三个，第一个用于上左(top-left)，第二个用于上右(top-right)、下左(bottom-left)，第三个用于下右(bottom-right)。
- 垂直半径也遵循以上4点。
- 对应的脚本特性为borderRadius。
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>border-radius_CSS参考手册_web前端开发参考手册系列</title>
<meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />
<style>
ul{margin:0;padding:0;}
li{list-style:none;margin:10px 0 0 0;padding:10px;background:#bbb;}
.test .one{border-radius:10px;}
.test .two{border-radius:10px 20px;}
.test .three{border-radius:10px 20px 30px;}
.test .four{border-radius:10px 20px 30px 40px;}
.test2 .one{border-radius:10px/5px;}
.test2 .two{border-radius:10px 20px/5px 10px;}
.test2 .three{border-radius:10px 20px 30px/5px 10px 15px;}
.test2 .four{border-radius:10px 20px 30px 40px/5px 10px 15px 20px;}
</style>
</head>
<body>
<h2>水平与垂直半径相同时：</h2>
<ul class="test">
<li class="one">提供1个参数<br />border-radius:10px;</li>
<li class="two">提供2个参数<br />border-radius:10px 20px;</li>
<li class="three">提供3个参数<br />border-radius:10px 20px 30px;</li>
<li class="four">提供4个参数<br />border-radius:10px 20px 30px 40px;</li>
</ul>
<h2>水平与垂直半径不同时：</h2>
<ul class="test2">
<li class="one">提供1个参数<br />border-radius:10px/5px;</li>
<li class="two">提供2个参数<br />border-radius:10px 20px/5px 10px;</li>
<li class="three">提供3个参数<br />border-radius:10px 20px 30px/5px 10px 15px;</li>
<li class="four">提供4个参数<br />border-radius:10px 20px 30px 40px/5px 10px 15px 20px;</li>
</ul>
</body>
</html>
用border写出一个三角形
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>border</title>
<style>
div{
width: 0;
height: 0;
border: 100px solid #f00;
border-top: none;
border-left-color:transparent;
border-right-color: transparent;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
用border-radius写出一个半圆
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>border</title>
<style>
div{
width: 100px;
height: 50px;
background-color:red;
border-radius:50px 50px 0 0;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
用border来画彩色四边矩形
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>border</title>
<style>
div{
width: 0;
height:0;
border-top:100px solid red;
border-right:100px solid yellow;
border-bottom:100px solid blue;
border-left:100px solid green;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
border-image
- <' border-image-source '>：设置或检索对象的边框是否用图像定义样式或图像来源路径。
- <' border-image-slice '>：设置或检索对象的边框背景图的分割方式。
- <' border-image-width '>：设置或检索对象的边框厚度。
- <' border-image-outset '>：设置或检索对象的边框背景图的扩展。
- <' border-image-repeat '>：设置或检索对象的边框图像的平铺方式。
box-shadow
box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>box-shadow_CSS参考手册_web前端开发参考手册系列</title>
<meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />
<style>
.test li {
margin-top: 20px;
list-style: none;
width: 400px;
padding: 10px;
background: #eee;
}
.test .outset {
box-shadow: 5px 5px rgba(0, 0, 0, .6);
}
.test .outset-blur {
box-shadow: 5px 5px 5px rgba(0, 0, 0, .6);
}
.test .outset-extension {
box-shadow: 5px 5px 5px 10px rgba(0, 0, 0, .6);
}
.test .inset {
box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, .6) inset;
}
.test .multiple-shadow {
box-shadow:
0 0 5px 3px rgba(255, 0, 0, .6),
0 0 5px 6px rgba(0, 182, 0, .6),
0 0 5px 10px rgba(255, 255, 0, .6);
}
</style>
</head>
<body>
<ul class="test">
<li class="outset">外阴影常规效果<br />box-shadow:5px 5px rgba(0,0,0,.6);</li>
<li class="outset-blur">外阴影模糊效果<br />box-shadow:5px 5px 5px rgba(0,0,0,.6);</li>
<li class="outset-extension">外阴影模糊外延效果<br />box-shadow:5px 5px 5px 10px rgba(0,0,0,.6);</li>
<li class="inset">内阴影效果<br />box-shadow:2px 2px 5px 1px rgba(0,0,0,.6) inset;</li>
<li class="multiple-shadow">外阴影模糊效果<br />box-shadow:5px 5px 5px rgba(0,0,0,.6);</li>
</ul>
</body>
</html>
line-height 控制段落里每行高度
p { line-height:25px;}
text-indent控制段落的首行缩进
p { text-indent:2em;}
text-align 控制段落对齐方式，不但是文本，对象中的其它inline或inline-block元素也能够被text-align进行对齐方式的设置。
p { text-align:right;}
letter-spacing 控制段落的文字间的距离
p { letter-spacing:5px;}
text-overflow 控制文字内容溢出部分的样式
但是text-overflow只是用来说明文字溢出时用什么方式显示，要实现溢出时产生省略号的效果，还须定义强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden），只有这样才能实现溢出文本显示省略号的效果。
div,input{
overflow: hidden; /*条件1：超出部分隐藏*/
white-space: nowrap;/*条件2：强制在同一行内显示所有文本*/
text-overflow: ellipsis;/*超出部分显示。。。*/
}
word-wrap 控制内容超过容器的边界时是否断行
background
- background-color 规定要使用的背景颜色。
- background-position 规定背景图像的位置。
- background-size 规定背景图片的尺寸。
- background-repeat 规定如何重复背景图像。
- background-origin 规定背景图片的定位区域。
- background-clip 规定背景的绘制区域。
- background-attachment 规定背景图像是否固定或者随着页面的其余部分滚动。
- background-image 规定要使用的背景图像。
linear-gradient 线性渐变
background-image: linear-gradient( [ <angle> | <side-or-corner> ,]? <color-stop> [, <color-stop>]+ );
{background-image:linear-gradient(left, red 100px, yellow 200px);}
#8.11.16总结#CSS常用样式总结（二）的更多相关文章
- CSS常用样式（二）
一.边框样式 1.border:复合属性.设置对象边框的特性. 取值: border-width: 设置或检索对象边框宽度. border-style: 设置或检索对象边框样式. border-col ...
- CSS常用样式及示例
CSS常用样式及示例 一.简介 层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集) ...
- CSS常用样式（四）之animation
上篇CSS常用样式(三)这篇博文中已经介绍过了CSS中具有动画效果的transition.transform,今天来大概说说CSS中的animation.animation的加入会使得动画效果更加乐观 ...
- 从零开始学习前端开发 — 9、标签嵌套规则及CSS常用样式覆盖
1. 块级元素可以包含内联元素或某些块级元素,但内联元素却不能包含块级元素,它只能包含其它的内联元素: <div><h1></h1><p></p& ...
- css常用样式对文本的处理演练
CSS文本属性可定义文本的外观,这是毫无疑问的,其次css可以通过以下属性改变文字的排版,比方说letter-spacing实现字符间距text-indent: 2em;完成首行缩进2字符word-s ...
- css常用样式font控制字体的多种变换
CSS 字体属性定义文本的字体系列.大小.加粗.风格(如斜体)和变形(如小型大写字母)font-family控制字体,由于各个电脑系统安装的字体不尽相同,但是基本装有黑体.宋体与微软雅黑这三款字体,通 ...
- css常用样式属性详细介绍
对于初学css的来说,肯定会觉得这么多样式不好记,而且记住了也容易忘,其实刚开始我们不用去记这么多的样式,确实是记了也会忘,刚开始只需记住一些常用的就可以了,然后在慢慢的使用过程当中接触并学习一些高级 ...
- CSS常用样式属性
1.CSS字体和文本相关属性 属性 font-family 规定文本的字体系列,比如:“serif” ''sans-serif" font-size 规定文本的字体尺寸 font-style ...
- CSS常用样式整理
元素边框显示圆角:-moz-border-radius适用于火狐浏览器,-webkit-border-radius适用于Safari和Chrome两种浏览器. 浏览器渐变背景颜色: FILTER: p ...
随机推荐
- Spark入门实战系列--5.Hive（上）--Hive介绍及部署
[注]该系列文章以及使用到安装包/测试数据 可以在<倾情大奉送--Spark入门实战系列>获取 .Hive介绍 1.1 Hive介绍 月开源的一个数据仓库框架,提供了类似于SQL语法的HQ ...
- 轻松自动化---selenium-webdriver(python) (四)
本节要解决的问题: 如何定位一组元素? 场景 从上一节的例子中可以看出,webdriver可以很方便的使用findElement方法来定位某个特定的对象,不过有时候我们却需要定位一组对象, 这时候就需 ...
- BonBon - 使用 CSS3 制作甜美的糖果按钮
BonBon 是一组使用 CSS3 制作的甜美的糖果按钮样式.在过去,我们都是使用图片或者 JavaScript 来实现漂亮的按钮效果,随着越来越多的浏览器对 CSS3 的支持和完善,使用 CSS3 ...
- jQuery邮箱自动补全代码
JScript 代码 复制 (function($){ $.fn.emailMatch= function(settings){ var defaultSettings = { emailTip: ...
- 数据库备份与还原SQL代码
--备份数据库 --必须先创建Backup文件夹 ) SET @name = 'D:\Backup\DingHanECard_V2_ZQGDJ_' ), ) + '.bak' BACKUP DATAB ...
- JavaScript中以一个方法作为参数的写法
前言,我们写js的时候,经常会看到一些方法,比如说: $("#ids").click(function( alert("Click me"); )); ---- ...
- 【Swift学习】Swift编程之旅（二）
在本节将介绍一些最基础的知识 swift提供自己版本的类型,下面说明几种简单的类型 Int 整型 Double和float 浮点型 String 字符串型 Bool 布尔型 它也提供了3种主要的强大的 ...
- max server memory
MS SQL Server 2008 R2,主要是用作ERP的数据库,但它的内存使用率非常高: 经查资料,原来数据库有默认的情况之下,使用内存时它是尽可能使用完有效内存.如果你不想这样,你可以手动分配 ...
- FireMonkey ListView 自动计算行高
说明:展示 ListView 视其每一行 Item 的 Detail 字串长度自动调整高度(可每行高度不同). 适用:Delphi XE7 / XE8 源码下载:[原创]ListView_自动计算行高 ...
- JPA一对多循环引用的解决
说是解决,其实不是很完美的解决的,写出来只是想记录一下这个问题或者看一下有没有哪位仁兄会的,能否知道一二. 下面说说出现问题: 问题是这样的,当我查询一个一对多的实体的时候,工具直接就爆了,差不多我就 ...