CSS3学习笔记（一）

2019-08-24 本文已影响0人 dev_winner

在编写CSS3样式时，不同的浏览器需要的前缀如下：

前缀	浏览器
-webkit	chrome和safari
-moz	firefox
-ms	IE
-o	opera

border-radius：向元素添加圆角边框。
使用方法：

border-radius:10px; 
/* 所有角都使用半径为10px的圆角 */ 
border-radius: 5px 4px 3px 2px; 
/* 四个半径值分别是左上角、右上角、右下角和左下角，顺时针 */

border-radius的值可以用px单位、百分比或em。
绘制一个实心上半圆：

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

绘制一个实心圆：

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

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

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

值	描述
X轴偏移量	`必需`。水平阴影的位置。允许负值。
Y轴偏移量	`必需`。垂直阴影的位置。允许负值。
阴影模糊半径	可选。模糊距离。
阴影扩展半径	可选。阴影的尺寸。
阴影颜色	可选。阴影的颜色。省略默认为黑色。
投影方式	可选。（设置inset时为`内部阴影`方式，若省略为`外阴影`方式）

注意：inset可以写在参数的第一个或最后一个，其它位置是无效的。

<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>测试7</title>
    <!-- <link rel="stylesheet" type="text/css" href="style04.css"> -->
    <style type="text/css" media="screen">
    .box_shadow1 {
        /*相对原位置的x轴偏移量、y轴偏移量，阴影模糊半径，阴影颜色*/
        box-shadow: 4px 2px 5px #333333;
        height: 100px;
        width: 100px;
    }
    .box_shadow2 {
        /*最后一个参数设置内部阴影方式*/
        box-shadow: 4px 2px 6px #333333 inset;
        height: 100px;
        width: 100px;
    }
    .box_shadow3 {
        /*添加多个阴影只需用逗号隔开*/
        box-shadow: 4px 2px 6px #f00,
            -4px -2px 6px #000,
            0px 0px 12px 5px #33CC00 inset;
        height: 100px;
        width: 100px;
    }
    </style>
</head>
<body>
    <div class="box_shadow1"></div>
    这是外阴影效果！
    <div class="box_shadow2"></div>
    这是内阴影效果！
    <div class="box_shadow3"></div>
    这是多个阴影效果！
</body>
</html>

效果展示

1、阴影模糊半径与阴影扩展半径的区别：

阴影模糊半径：此参数可选，其值只能是为正值，如果其值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊；
阴影扩展半径：此参数可选，其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值时，则缩小。
2、X轴偏移量和Y轴偏移量值可以设置为负数：
X轴偏移量为负数：

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

X轴值为负数

Y轴偏移量为负数：

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

Y轴值为负数

为边框应用背景图片border-image：其和background属性比较相似：background: url(图片绝对/相对路径) 10px 20px no-repeat;
border-image-source: url(图片绝对/相对路径)：边框背景图片，也可以不使用背景图片：border-image: none;
border-image-slice: top right bottom left;（参数为顺时针：上右下左）：图片边框向内偏移的距离，即裁剪位置。该距离接受数值，百分数。默认数值的单位是像素(px)，但是不能在数值后面加px，否则这句css将不被浏览器解析！举个栗子：设置裁剪百分数：border-image-slice: 30% 35% 40% 30%。由图可知，裁剪完之后图片形成九宫格。边框图片被切割成9部分，以一一对应的关系放到div边框的九宫格中，然后再压缩（或拉伸）至边框（border-width或border-image-width）的宽度大小。
border-image-repeat: repeat（平铺）/round（铺满）/stretch（拉伸）（重复性）：参数0~2个，0个参数表示使用默认值 – stretch；1个参数表示水平方向及垂直方向均使用设置的参数；2个参数：第一个参数表示水平方向，第二个参数表示垂直方向。

裁剪位置

注意：在border-image中，角边框图片是没有任何展示效果，即不会平铺，不会重复，也不会拉伸！

设置repeat

设置round

设置stretch

拿网上3张比较明显的测试图好好感受一下：

设置repeat

设置round

设置stretch

CSS3颜色之RGBA

RGB是一种色彩标准，是由红(R)、绿(G)、蓝(B)的变化以及相互叠加来得到各式各样的颜色。RGBA是在RGB的基础上增加了控制alpha透明度的参数。语法：color：rgba(R,G,B,A);
以上R、G、B三个参数，正整数值的取值范围为：0 - 255。百分数值的取值范围为：0.0% - 100.0%。超出范围的数值将被截至其最接近的取值极限。并非所有浏览器都支持使用百分数值。A为透明度参数，取值在0~1之间，不可为负值。举个例子：

<p style="background-color: rgba(0, 0, 0, 0.9); ">设置背景颜色的透明度为0.9</p>
<p style="background-color: rgba(0, 0, 0, 0.5); ">设置背景颜色的透明度为0.5</p>

设置背景透明度

颜色渐变：CSS3 Gradient 分为线性渐变(linear)和径向渐变(radial)。由于不同的渲染引擎实现渐变的语法不同，这里只针对线性渐变的 W3C 标准语法来分析其用法，W3C 语法已经得到了 IE10+、Firefox19.0+、Chrome26.0+ 和 Opera12.1+等浏览器的支持。

线性渐变

参数描述：
1、第一个参数指定渐变方向，可以用角度的关键词或英文短语来表示。若省略此参数，则默认为180deg，等同于to bottom。
2、第二个和第三个参数：表示颜色的起始点和结束点，可以有多个颜色值。至少2种颜色！
径向渐变：设置形状，其值为 circle（圆形） 或 ellipse（椭圆形）。默认值是ellipse。尺寸大小有4个值：closest-side、farthest-side、closest-corner、farthest-corner。

<p style="background: radial-gradient(circle, #f00,#ff0,#0f0); text-align: center;">径向渐变，可以设置形状、尺寸大小，但不能设置渐变方向，否则浏览器不能解析！</p>
<p style="background: linear-gradient(to left, red, orange, yellow, green, blue, indigo, violet); text-align: center;">线性渐变，可以设置渐变方向</p>

渐变效果展示

用角度表示	用英文表示	作用
0deg	to top	从下向上
90deg	to right	从左向右
180deg	to bottom	从上向下
270deg	to left	从右向左
-	to top left	从右下角到左上角
-	to top right	从左下角到右上角

CSS3文字与字体

text-overflow：用来设置是否使用一个省略标记...标示对象内文本的溢出。语法：

text-overflow: clip | ellipsis;
/*
clip：表示剪切；
ellipsis：表示显示省略标记。
*/

但text-overflow只是用来说明文字溢出时用什么方式显示，要实现溢出时产生省略号的效果，还须定义强制文本在一行内显示（white-space: nowrap）及溢出内容为隐藏（overflow: hidden），代码如下：

text-overflow: ellipsis; 
white-space: nowrap; 
overflow: hidden;

/*
normal为浏览器默认值；
break-word设置在长单词或 URL地址内部进行换行，此属性不常用，用浏览器默认值即可。
*/
word-wrap: normal | break-word;

word-wrap也可以用来设置文本行为，当前行超过指定容器的边界时是否断开转行。

.test {
    text-overflow: ellipsis; 
    overflow: hidden; 
    white-space: nowrap; 
    width: 200px;  
    background: #ccc;
}
<div class="test">
    超酷的IT技术学习平台（我是省略号）
</div>

文字溢出时显示为省略号

嵌入字体@font-face：@font-face能够加载服务器端的字体文件，让浏览器端可以显示用户电脑里没有安装的字体。语法：

@font-face {
    font-family : "My Font"/*（字体名称）*/;
    src : url("字体文件在服务器上的相对或绝对路径");
}

这样设置之后，就可以像使用普通字体一样在（font-*）中设置字体样式。举个例子：

p {
    font-size :12px;
    font-family : "My Font";
    /*必须项，设置@font-face中font-family同样的值*/
}

text-shadow可以用来设置文本的阴影效果。语法：

text-shadow: X-Offset Y-Offset blur color;

1、X-Offset：表示阴影的水平偏移距离，其值为正值时阴影向右偏移，反之向左偏移；
2、Y-Offset：是指阴影的垂直偏移距离，如果其值是正值时，阴影向下偏移，反之向上偏移；
3、Blur：是指阴影的模糊程度，其值不能是负值，如果值越大，阴影越模糊，反之阴影越清晰，如果不需要阴影模糊可以将Blur值设置为0；
4、Color：是指阴影的颜色，其可以使用rgba色。

.test {
    width: 340px;
    padding: 30px;
    font: bold 55px/100% "微软雅黑";
    background: #C5DFF8;
    text-shadow: 2px 2px 0px red;
}
<div class="test">Love </div>

设置文本阴影

CSS3学习笔记（一）

CSS3颜色之RGBA

CSS3文字与字体

猜你喜欢

热点阅读