css框体样式

//向右倾斜60度

transform:rotate(60deg);
-ms-transform:rotate(60deg); /* IE 9 */
-webkit-transform:rotate(60deg); /* Safari and Chrome */

//圆角化对象，当值到大对象一半时为正圆

border-radius:25px;

四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。

三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角

两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角

一个值： 四个圆角值相同

//对象阴影;默认情况下外阴影；(投影方式)(X轴偏移量)(Y轴偏移量)(阴影模糊半径)(阴影扩展半径)(阴影颜色)

box-shadow: 10px 10px 5px #888888;

//图片边框;round:复制部分内容填充; stretch:拉伸部位填充针对div

border-image:url(border.png) 30 30 round;
-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 and older */
-o-border-image:url(border.png) 30 30 round; /* Opera */

//背景图片直接设置属性；100%：拉伸到整个区域

background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;

background-size:100% 100%

//由内到外三层放置背景图片

content-box, padding-box,和 border-box区域内可以放置背景图像

//位置背景的裁剪

background-clip: padding-box;

background-clip: content-box;

//颜色渐变（红和蓝）方向；颜色1；颜色2；颜色3...；方向可以是角度：90deg

//background: linear-gradient(direction, color-stop1, color-stop2, ...);

//(red 10%, green 85%, blue 90%);指定颜色百分比后渐变颜色节点会消失

//(left, rgba(255,0,0,0), rgba(255,0,0,1));渐变的透明属性只能用rgba设置

background: -webkit-linear-gradient(left top, red , blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(bottom right, red, blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(bottom right, red, blue); /* Firefox 3.6 - 15 */
background: linear-gradient(to bottom right, red , blue); /* 标准的语法（必须放在最后） */

//repeating使渐变重复

background: repeating-linear-gradient (red, green, blue);

//径向渐变 - 颜色结点均匀分布（默认情况下）；圈状

background: radial-gradient(red, green, blue);

//径向渐变 为圆形//折合前面属性加上对应前缀即可

background: radial-gradient(circle, red, yellow, green);

//指定的文字水平阴影，垂直阴影，模糊的距离，以及阴影的颜色

text-shadow: 5px 5px 5px #FF0000;

//box-shadow 属性适用于盒子阴影，水平阴影，垂直阴影，模糊的距离，以及阴影的颜色

width:300px;
height:100px;

box-shadow: 10px 10px 5px #888888;

//阴影的卡片模式

box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

//超出部分隐藏

white-space:nowrap; 
width:12em; 
overflow:hidden; 
border:1px solid #000000;

//文本超出换行

word-wrap:break-word;

//单词拆分换行

word-break:keep-all;

//使用自己下载的字体  注意兼容性

@font-face
{
　　font-family: myFirstFont;
　　src: url(‘Sansation_Light.ttf‘)
　　,url(‘Sansation_Light.eot‘); /* IE9 */
}

div{font-family:myFirstFont;}

//旋转30度角 3条语句效果一样

transform:rotate(30deg);
-ms-transform:rotate(30deg); /* IE 9 */
-webkit-transform:rotate(30deg); /* Safari and Chrome */

//translate()方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。

transform:translate(50px,100px);
-ms-transform:translate(50px,100px); /* IE 9 */
-webkit-transform:translate(50px,100px); /* Safari and Chrome */

//rotate()方法，在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。

transform:rotate(30deg);
-ms-transform:rotate(30deg); /* IE 9 */
-webkit-transform:rotate(30deg); /* Safari and Chrome */

//scale()方法，该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数：

-ms-transform:scale(2,3); /* IE 9 */

-webkit-transform: scale(2,3); /* Safari */

transform: scale(2,3); /* 标准语法 */

//包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜

transform:skew(30deg,20deg);
-ms-transform:skew(30deg,20deg); /* IE 9 */
-webkit-transform:skew(30deg,20deg); /* Safari and Chrome */

//matrix 方法有六个参数，包含旋转，缩放，移动（平移）和倾斜功能。

transform:matrix(0.866,0.5,-0.5,0.866,0,0);
-ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */
-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */

//rotateX()方法，围绕其在一个给定度数X轴旋转的元素。

transform:rotateX(120deg);
-webkit-transform:rotateX(120deg); /* Safari and Chrome */

//rotateY()方法，围绕其在一个给定度数Y轴旋转的元素。

transform:rotateY(130deg);
-webkit-transform:rotateY(130deg); /* Safari and Chrome */

//鼠标经过的多样式过度，帅气

div {
　　width: 100px;
　　height: 100px;
　　background: red;
　　-webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* For Safari 3.1 to 6.0 */
　　transition: width 2s, height 2s, transform 2s;
}

div:hover {
　　width: 200px;
　　height: 200px;
　　-webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
　　transform: rotate(180deg);
}

//过度等待反应时间设置

transition:width 1s linear 2s;

//红到黄5秒时间渐变

div
{　  width:100px;
 　　height:100px;
 　　background:red;
      animation: myfirst 5s;
      -webkit-animation: myfirst 5s; /* Safari 与 Chrome */
}

@keyframes myfirst

{

from {background:red;}
     to {background:yellow;}

}

@-webkit-keyframes myfirst /* Safari and Chrome */

{

from {background:red;}
     to {background:yellow;}

}

//百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。注意对应浏览器

div

{

　　width:100px;

　　height:100px;

　　background:red;

　　animation:myfirst 5s;

　　-moz-animation:myfirst 5s; /* Firefox */

　　-webkit-animation:myfirst 5s; /* Safari and Chrome */

　　-o-animation:myfirst 5s; /* Opera */

}

@keyframes myfirst

{

　　0%   {background:red;}

　　25%  {background:yellow;}

　　50%  {background:blue;}

　　100% {background:green;}

}

@-moz-keyframes myfirst /* Firefox */

{

　　0%   {background:red;}

　　25%  {background:yellow;}

　　50%  {background:blue;}

　　100% {background:green;}

}

@-webkit-keyframes myfirst /* Safari and Chrome */

{

　　0%   {background:red;}

　　25%  {background:yellow;}

　　50%  {background:blue;}

　　100% {background:green;}

}

@-o-keyframes myfirst /* Opera */

{

　　0%   {background:red;}

　　25%  {background:yellow;}

　　50%  {background:blue;}

　　100% {background:green;}

}

//改变了背景色和位置，实现方框式移动

div
{
 width:100px;
 height:100px;
 background:red;
 position:relative;
 animation:myfirst 5s;
 -webkit-animation:myfirst 5s; /* Safari and Chrome */
}

@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;}
}

@-webkit-keyframes myfirst /* Safari 与 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;}
}

//移动加渐变整体效果，运行myfirst动画，设置所有的属性：

div
{

　　width:100px;
 　　height:100px;
　　 background:red;
　　 position:relative;
    animation: myfirst 5s linear 2s infinite alternate;
    /* Safari 与 Chrome: */
    -webkit-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;}
}

@-webkit-keyframes myfirst /* Safari 与 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;}
}

//报纸类型分文本格式,count对应的是分几个，gap对应的之间间隔，rule-style对应两列之间的边框，rule-width对应边框厚度

　　rule-color对应边框颜色

.newspaper
{
 　　-moz-column-count:3; /* Firefox */
 　　-webkit-column-count:3; /* Safari and Chrome */
　　 column-count:3;

　　-moz-column-gap:40px; /* Firefox */
 　　-webkit-column-gap:40px; /* Safari and Chrome */
　　 column-gap:40px;

　　 -webkit-column-rule-style: solid; /* Chrome, Safari, Opera */
       -moz-column-rule-style: solid; /* Firefox */
       column-rule-style: solid;

-webkit-column-rule-width: 1px; /* Chrome, Safari, Opera */
      -moz-column-rule-width: 1px; /* Firefox */
      column-rule-width: 1px;

-webkit-column-rule-color: lightblue; /* Chrome, Safari, Opera */
      -moz-column-rule-color: lightblue; /* Firefox */
      column-rule-color: lightblue;
}

<div class="newspaper">****</div>

//直接简单设置

-webkit-column-rule: 1px solid lightblue; /* Chrome, Safari, Opera */
    -moz-column-rule: 1px solid lightblue; /* Firefox */
    column-rule: 1px solid lightblue;

//指定跨越几个边框

h2 {
    -webkit-column-span: all; /* Chrome, Safari, Opera */
    column-span: all;
}

<div><h2></h2></div>

//column-width 属性指定了列的宽度。

div {
    -webkit-column-width: 100px; /* Chrome, Safari, Opera */
    column-width: 100px;
}

时间： 2024-08-01 10:43:17

css框体样式的相关文章

CSS自定义select下拉选择框的样式(不用其他标签模拟)

CSS自定义select下拉选择框的样式(不用其他标签模拟):http://www.jb51.net/css/148841.html CSS美化选择框:http://www.cnblogs.com/shishm/archive/2012/03/02/2376759.html 1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5

关于CSS框模型及定位的概念

一.CSS框模型(box model)包含了边框(boder).外边距(margin).内边距(padding).宽(width).高(height).元素(element).背景应用于由内容.边框.内边距组成的区域.单边内边距的属性有四个,分别设有上.右.下.左内边距:padding —top   padding—right  padding—bottom  padding—left. 内边距数值可以是阿拉伯数字(单位厘米),也可以是百分比数值.边框的样式在boder—style中设置,可以定

CSS框模型（框模型概述、内边距、边框、外边距、外边距合并）

CSS 框模型概述 CSS 框模型 (Box Model) 规定了元素框处理元素内容.内边距.边框 和 外边距 的方式. 元素框的最内部分是实际的内容,直接包围内容的是内边距.内边距呈现了元素的背景.内边距的边缘是边框.边框以外是外边距,外边距默认是透明的,因此不会遮挡其后的任何元素. 内边距.边框和外边距都是可选的,默认值是零.但是,许多元素将由用户代理样式表设置外边距和内边距.可以通过将元素的 margin 和 padding 设置为零来覆盖这些浏览器样式.这可以分别进行,也可以使用通用选择

CSS自定义滚动条样式

相信很多人都遇到过在设计中自定义滚动条样式的情景,之前我都是努力说服设计师接受浏览器自带的滚动条样式,但是这样只能规避还是解决不了问题,最近在项目中遇到了,正好来总结一下.当然,兼容所有浏览器的滚动条样式目前是不存在的. IE下的滚动条样式 IE是最早提供滚动条的样式支持,好多年了,但是其它浏览器一直没有支持,IE独孤求败了. 这些样式规则很简单: scrollbar-arrow-color: color; /*三角箭头的颜色*/ scrollbar-face-color: color; /*立

CSS 框模型概述

CSS 框模型 (Box Model) 规定了元素框处理元素内容.内边距.边框 和 外边距 的方式. CSS 框模型概述 元素框的最内部分是实际的内容,直接包围内容的是内边距.内边距呈现了元素的背景.内边距的边缘是边框.边框以外是外边距,外边距默认是透明的,因此不会遮挡其后的任何元素. 提示:背景应用于由内容和内边距.边框组成的区域. 内边距.边框和外边距都是可选的,默认值是零.但是,许多元素将由用户代理样式表设置外边距和内边距.可以通过将元素的 margin 和 padding 设置为零来覆盖

angular学习笔记(九)-css类和样式2

在上一个例子中,元素的类名使用拼接的方法,这样,类名中就不得不带有true或false,并且不易维护,所以,angular使用ng-class属性来控制元素的类名: 我们来看一个小例子,点击error按钮,顶部提示错误框,点击warning按钮,顶部提示警告框. 错误框的类名是.err,警告框的类名是.warn: <!DOCTYPE html> <html ng-app> <head> <title>6.2css类和样式</title> <

CSS框模型，浮动，定位以及其他属性

1.CSS 框模型 (Box Model) 规定了元素框处理元素内容.内边距.边框 和 外边距 的方式 element : 元素. padding : 内边距,也有资料将其翻译为填充. border : 边框. margin : 外边距,也有资料将其翻译为空白或空白边. 围绕在元素边框的空白区域是外边距.设置外边距会在元素外创建额外的“空白”.设置外边距的最简单的方法就是使用 margin 属性,这个属性接受任何长度单位.百分数值甚至负值. * { margin: 0; padding: 0;}

精通CSS+DIV网页样式与布局--初探CSS

CSS英文名Cascading Style Sheet,中文名字叫层叠样式表,是用于控制页面样式并允许将样式信息与网页内容分离的一种标记性语言,DIV+CSS是WEB设计标准,它是一种网页的布局方法.与传统中通过表格(table)布局定位的方式不同,它可以实现网页页面内容与表现相分离.提起DIV+CSS组合,还要从XHTML说起.XHTML是一种在HTML(标准通用标记语言的子集)基础上优化和改进的新语言,目的是基于XML应用与强大的数据转换能力,适应未来网络应用更多的需求."DIV+CSS&q

CSS+DIV网页样式与布局——文字样式&amp;段落（一）

一个网页要说最多的还是文字,上篇博客说CSS样式是一个网页的精髓,那网页中最直接表现出来的就是文字和图片,还有一些所谓的表单,首先先说最为熟悉和常用的文字.让CSS控制网页中的文字,使它不再那么枯燥平淡,从此网页文字变得绚丽多彩. 一.文字样式 文字样式主要包括文字的大小.颜色.字体等,具体包括如下 写一个小例子,综合运用上述所有的文字效果样式: 代码: <html> <head> <title>文字字体</title> <style> body