#8.11.16总结#CSS常用样式总结（二）

时间：2016-08-12 01:25:09 阅读：256 评论：0 收藏：0 [点我收藏+]

标签：

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常用样式总结（二）

标签：

原文地址：http://www.cnblogs.com/churjan/p/5763302.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行