![](https://img-blog.csdnimg.cn/20201014180756930.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
CSS-基础
文章平均质量分 65
june_ruikang
看得见远方,追的上路人
展开
-
边框
1、基本属性:border:border-width border-style border-colorborder-width(默认3px,单位px)border-style(必写,none:无边框,solid:实线,dotted:点状边框,dashed:虚线边框, double:双线,groove:3d凹槽……)border-color(默认黑色)2、基本属性细化:原创 2016-05-02 14:52:32 · 313 阅读 · 0 评论 -
css中的多样化文本阴影:text-shadow
/*text-shadow:添加多样化的文本阴影*//*text-shadow:length||length||opacity||color:左右偏移距离||上下偏移距离||模糊度||阴影颜色*/p[lang="a"]{font-family: "微软雅黑";font-weight: 100px;font-size: 100px;color: #DC143C;text-原创 2016-03-28 14:01:24 · 1420 阅读 · 0 评论 -
css中的溢出文本和文本对齐
/*溢出文本处理:text-overflow*//*text-overflow:clip|ellipsis|ellipsis-word:直接裁切|用。。。代替最后一个字符|用。。。代替左后一个词*/li{line-height: 30px;font-size: 20px;border-bottom: 1px solid #ccc;width: 600px; /*设置宽度原创 2016-03-28 15:00:20 · 1130 阅读 · 0 评论 -
css中字体的设置
/*font-family:文本字体名称font-style:文本样式font-variant:文本是否为小型大写字母大小写font-weight:设置文本的粗细font-stretch:文本是否横向的拉伸变形font-size:文本字号大小写src:自定义字体的相对路径或绝对路径,此属性只能在@font-face中使用*/p[lang="a"]{font-fami原创 2016-03-28 15:26:19 · 406 阅读 · 0 评论 -
css中颜色的设置
/*HSL色彩模式:hsl(length,percentage,percentage):色调、饱和度、明亮度*//*HSL的优势:可以在同一色系中选择颜色,使得搭配不会太离谱*/.hs1{height: 20px;border: 1px solid #f00;padding: :10px;height: 170px;;background-color: hsl(0,0%原创 2016-03-28 17:04:10 · 709 阅读 · 0 评论 -
css中的边框border
/**//**/.bor1{margin-left: auto;margin-right: auto;width: 80%;height: 200px;border: 3px brown solid;}/*border-top-colors……同于border-top-style一系列,可以分别设计四个面*/.bor2{width: 300px;he原创 2016-03-29 15:26:34 · 555 阅读 · 0 评论 -
css中的盒子模型
/*消除浏览器自带的偏移*/*{margin: 0;padding: 0;}/*margin-left: auto;margin-right: auto;保证居中*/.wrapper{width: 960px;margin-left: auto;margin-right: auto;color: black;background: #000000;原创 2016-03-29 15:42:10 · 224 阅读 · 0 评论 -
选择器
使用选择器的原则,一定要准,要精确,尽量不用别的,都用classname。像 .bd .slider这种,要直接写成.slider 选择器cssjquery解释基本选择器ie基本只支持这些*通配选择器*{}$("*")所有元素E原创 2016-05-02 14:57:34 · 260 阅读 · 0 评论 -
动画
1、基本实现关键帧:定义关键帧要用@keyframes声明,并自定义一个动画的名称。@keyframeschange_bgpic{ 0%{ background-color:red;原创 2016-05-02 14:57:00 · 214 阅读 · 0 评论 -
过渡
CSS 过渡(transition)是通过定义元素从 起点的状态 和 结束点的状态 ,在一定的时间区间内实现元素平滑地过渡或变化 的一种补间动画机制。你可以让属性的改变过程持续一段时间,而不是立即生效。通过transition你可以决定哪个属性发生动画效果 (可以通过明确地列出这些属性),何时开始动画 (通过设置delay), 动画持续多久 (通过设置duration), 以及如何动画 (通过原创 2016-05-02 14:56:32 · 246 阅读 · 0 评论 -
变形
1、基本属性transform:none| *例如:旋转180度,放大1.5倍,倾斜120度,移动10,矩阵变换transform:rotate(180deg) scale(1.5) skew(120deg) matrix(1,0,0,1,50,50);以上四个函数任选。2、transform-origin属性transform-origin属性值可以是百分比、em、p原创 2016-05-02 14:55:57 · 386 阅读 · 0 评论 -
渐变
1、基本定义因为不兼容性,没有深入学习,本节引自博客:runoob.com/css3/css3-gradients.htmlCSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡。以前,你必须使用图像来实现这些效果。但是,通过使用 CSS3 渐变(gradients),你可以减少下载的事件和宽带的使用。此外,渐变效果的元素在放大时看起来效果更好,因为渐变(gr原创 2016-05-02 14:55:26 · 274 阅读 · 0 评论 -
盒模型
1、基本模型2、控制布局不乱,在每一个部分都加上如下几句:-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;内外边距固定,宽度不定(如百分比)时常常用此方法。3、伸缩盒布局:由于许多浏览器还不支持该属性,以后再做介绍。原创 2016-05-02 14:54:41 · 269 阅读 · 0 评论 -
颜色
最保险的是用#...,ie7、8不支持透明属性,用滤镜实现透明效果1、透明属性opacity:0:完全透明1:完全不透明0到1之间的任意浮点数表示透明度:2、RGBA颜色模式:background:rgba(红色值、绿色值、蓝色值、透明值)ie9之上才有效3、HSLA颜色模式:更容易取得一个色系的颜色hsla(length,percentage,percen原创 2016-05-02 14:54:10 · 219 阅读 · 0 评论 -
文本
1、简单字体:不在css中设置时也可显示,如下均能显示:(1) font: 13px;(2) font: "微软雅黑";用font设置字体,浏览器的兼容性不太好2、基本字体:font-family: "微软雅黑";//字体一般pc端使用宋体,wap使用微软雅黑禁止用中文属性值font-size: 15px;//大小font-style:i原创 2016-05-02 14:53:34 · 296 阅读 · 0 评论 -
背景
1、简单背景:(1) 图片:background: url(img/back.jpg) 20px 20px;(2) 颜色:background: #ffff;2、基本背景:background-color:bisque;background-image: url(img/back.jpg); /*repeat-x、repeat-y、rep原创 2016-05-02 14:53:04 · 306 阅读 · 0 评论 -
css中的选择器
ul{margin: 0;padding: 10px 10px 10px 30px; }li{margin: 1px;font-family: "微软雅黑";font-weight: 900;}/*元素选择符和关系选择符*//**:选择所有元素*//*E:选择指定类型的元素*//*E#myid:选择id属性等于myid的元素*//*E.mycla原创 2016-03-28 13:07:33 · 287 阅读 · 0 评论