标签：height   href   style   椭圆   lte   标签   sum   long   距离   

css文件

/* 注释内容 */

/* 选择器，其中body就是一个选择器，表示选中个body这个标签
    声明块：为选择器设置样式
    {
        样式名: 样式值;
    }
*/
body{
    background-color: aquamarine;
}

/* 元素选择器：根据标签来选中指定的元素 ，例如 body{}，p{}，div{}*/
p{
    color: blue;
}

/* id选择器，根据元素的id属性值选中一个元素，语法#id属性值{}，例如 #box{} */
#box{
    height: 100px;
}

/* class选择器，根据元素的class属性值选中元素，语法 .class属性值{}
    一个元素可以使用多个class    
    
    
    id box
    
    class blue 
 */
.blue{
    color: blue;
}

/* 伪类选择器 */
.blue::after{
    /* 类加载之后 */
    color: #9198e5;
}
/* 边框样式 */
div[title=div1]{
    /* 线条粗细 */
    border: 5px solid;

    /* 圆角
    四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。
    三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角
    两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角
    一个值： 四个圆角值相同: 重要
    */
    border-radius: 25px;

    /* 内边距（内容与div的距离） */
    padding: 10px 40px;

    /* 集中定义各种背景属性（color，image，origin） */
    background: #dddddd;
    width: 300px;

    /* div阴影效果 */
    box-shadow: 10px 10px 5px #888888;
    /* 给阴影添加颜色 */
    box-shadow: 10px 10px grey;

    /* 边界图片 */
    border-image: url(./rng.png) 30 30 round;
}

#example1{
    background-image: url(./rng.png);
    
    /* 为背景图片设置初始位置*/
    background-position: right bottom;
    
    /* 设置背景图片显示样式（居中，拉伸等） */
    background-repeat: no-repeat;
   
    /* 设置背景图大小 */
    background-size: 100% 100%;

    /* 背景图像的位置区域（内边距的位置，div内容的位置，外边距的位置） */
    background-origin: content-box;

    /* 裁剪背景 */
    background-clip: content-box;

    padding: 30px 50px;
    width: 300px;
    height: 500px;
}

#grad1{
    height: 200px;
    background-color: red;
    /* 从上到下由红开始渐变 */
    background-image: linear-gradient(#e66465, #9198e5);

    /* 从左到又开始渐变 */
    background-image: linear-gradient(to right, red, yellow);

    /* 从左上角到右下角渐变 */
    background-image: linear-gradient(to bottom right, red, yellow);

    /* 透明度 */
    background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));

    /* 重复的线性渐变 */
    background-image: repeating-linear-gradient(red, yellow 10%, green 20%);

    /* 径向渐变 */
    background-image: radial-gradient(red,yellow,green);

    /* 设置形状
    shape 参数定义了形状。它可以是值 circle 或 ellipse。
    其中，circle 表示圆形，ellipse 表示椭圆形。默认值是 ellipse。
    */
    background-image: radial-gradient(circle, red, yellow, green);
}

/* css3的文本样式 */
h1{
    /* 文本阴影 */
    text-shadow: 5px 5px 5px #FF0000;
}

p{
    white-space: nowrap;
    width: 200px;
    border: 1px solid #000000;
    overflow: hidden;
    /* 设置文本溢出的样式  ellipsis 显示...， clip 显示最后能显示全的字符*/
    /* text-overflow: ellipsis; */
    text-overflow: clip;

    /* 换行 */
    word-wrap: break-word;
}

/* 字体引用 */
@font-face{
    font-family: serif;
    src: url();
    font-weight: bold;
}

/* 2D转换 */
div{
    transform: rotate(30deg);
    /* ie 9 */
    -ms-transform: rotate(30deg);
    /* Safar */
    -webkit-transform: rotate(30deg);
}

/* 3D转换 */
#example1{
    transform: rotateX(120deg);
    -webkit-transform: rotateX(120deg); /* Safari 与 Chrome */
}

/* 过渡 */
div{
	width:100px;
	height:100px;
	background:red;
	transition:width 1s linear 2s;
	/* Safari */
	-webkit-transition:width 1s linear 2s;
}

div:hover
{
    width:300px;
}

/* css动画 */
div
{
	width:100px;
	height:100px;
	background:red;
	position:relative;
	animation:myfirst 5s linear 2s infinite alternate;
	/* Firefox: */
	-moz-animation:myfirst 5s linear 2s infinite alternate;
	/* Safari and Chrome: */
	-webkit-animation:myfirst 5s linear 2s infinite alternate;
	/* Opera: */
	-o-animation:myfirst 5s linear 2s infinite alternate;
}

@keyframes myfirst
{
	0%   {background:red; left:0px; top:0px;}
	25%  {background:yellow; left:200px; top:0px;}
	50%  {background:blue; left:200px; top:200px;}
	75%  {background:green; left:0px; top:200px;}
	100% {background:red; left:0px; top:0px;}
}

@-moz-keyframes myfirst /* Firefox */
{
	0%   {background:red; left:0px; top:0px;}
	25%  {background:yellow; left:200px; top:0px;}
	50%  {background:blue; left:200px; top:200px;}
	75%  {background:green; left:0px; top:200px;}
	100% {background:red; left:0px; top:0px;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
	0%   {background:red; left:0px; top:0px;}
	25%  {background:yellow; left:200px; top:0px;}
	50%  {background:blue; left:200px; top:200px;}
	75%  {background:green; left:0px; top:200px;}
	100% {background:red; left:0px; top:0px;}
}

@-o-keyframes myfirst /* Opera */
{
	0%   {background:red; left:0px; top:0px;}
	25%  {background:yellow; left:200px; top:0px;}
	50%  {background:blue; left:200px; top:200px;}
	75%  {background:green; left:0px; top:200px;}
	100% {background:red; left:0px; top:0px;}
}

/* css3 调整尺寸 */
div{
    resize:both;
    overflow: auto;
}

/* 响应式图片 */
img{
    max-width: 100%;
    height: auto;
}

/* css框大小 */
div{
    width: 300px;
    height: 100px;    
    padding: 50px;
    border: 1px solid red;
    /*  
    元素上设置了 box-sizing: border-box; 
    则 padding(内边距) 和 border(边框) 也包含在 width 和 height 中:
    */
    box-sizing: border-box;
}

/* css3 弹性盒子 flex box（响应式） */
/* https://www.runoob.com/css3/css3-flexbox.html */

/* 多媒体查询 */
/* https://www.runoob.com/css3/css3-mediaqueries.html */

/* 布局grid */
/* https://developer.mozilla.org/zh-CN/docs/Web/CSS/grid */

html文件

字符
    
设置样式

    
    id box
    
    class blue

    
border-radius 属性允许您为元素添加圆角边框！

    

        
Lorem Ipsum Dolor
        
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
        
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
    

    
线性渐变 - 从上到下
    
从顶部开始的线性渐变。起点是红色，慢慢过渡到蓝色：
    
    


    
This is some long text that will not fit in the box
    
div 使用 "text-overflow:clip":

CSS部分样式知识

标签：height   href   style   椭圆   lte   标签   sum   long   距离   

原文地址：https://www.cnblogs.com/zy7y/p/13369775.html