css3
css3
wll_blogs
***
展开
-
css高度塌陷问题以及兼容IE6
css高度塌陷问题以及兼容IE6首先我们要明白什么是高度塌陷:在父元素不设置高度的情况下,其高度是由子元素所撑开的,如果子元素脱离文档流,父元素就会出现高度塌陷的问题。元素未脱离文档流的情况: <div class="box"> <div class="inner"></div> </div> <div class="wrap...原创 2020-03-14 19:50:23 · 198 阅读 · 0 评论 -
css圆角(border-radius)的深入理解
css圆角(border-radius)的深入理解写在前面:1.介绍: 在border-radius出来之前,传统的生成圆角,必须使用多张图片作为背景图案,浪费很多的时间。 css3圆角的出现,使我们再也不必浪费时间去制作这些图片了,并且可以减少文件维护的工作量、提高网页性能,增加视觉可靠性。2.border-radius: 这是一个简写属性,用来设置: border-top-l...原创 2020-01-07 16:46:55 · 3247 阅读 · 0 评论 -
css调节和控制元素大小
css调节和控制元素大小1.(resize)调节元素大小2.(box-sizing)控制元素大小写在前面:1.(resize)调节元素大小: none(无法调节). both(允许调节). horizontal(调节宽度). vertical(调节高度). 注意:resize要和overflow:auto搭配使用.2.(box-sizing)控制元素大小: content-bo...原创 2020-01-07 11:01:51 · 3128 阅读 · 0 评论 -
css使图像模糊
css使图像模糊我们可以使用css中的filter(滤镜)属性使图片呈现出模糊的效果:HTML代码:<img src="img/A.jpg" />页面效果:添加filter属性:img{ filter:blur(5px)}页面效果:以下是filter(滤镜)属性的参数及使用方法:参数呈现效果使用方法默认值none默认值,没有效果...原创 2020-01-07 10:12:17 · 362 阅读 · 0 评论 -
css3多列布局(分栏布局)
css3多列布局演示模板HTML代码: <div id="box"> 多列布局,多列布局,多列布局,多列布局,多列布局,多列布局,多列布局,多列布局,<br> 多列布局,多列布局,多列布局,多列布局,多列布局,多列布局,多列布局,多列布局,<br> 多列布局,多列布局,多列布局,多列布局,多列布局,多列布局,多列布局,多列布局,<br>...原创 2019-12-27 10:57:31 · 1282 阅读 · 0 评论 -
css3响应式布局核心(@media常用属性)
css3响应式布局核心(@media常用属性)1.媒体类型响应式布局的核心:css3媒体查询选择器。@media相关属性:1.媒体类型: all:所有媒体(默认值). screen:彩色屏幕. print:打印预览. projection:手持设备. tv:电视. braille:盲文触觉设备. embossed:盲文打印机. speech:屏幕阅读器等发声设备. tty:...原创 2019-12-26 20:09:52 · 3272 阅读 · 8 评论 -
css弹性布局(display:flex)
css弹性布局(display:flex)display:flex相关属性:容器属性1.flex-direction:控制主轴是哪一根,控制主轴的方向2.justify-content:管理主轴富裕空间3.align-items:管理侧轴富裕空间4.flex-wrap:控制的是侧轴的方向5.align-content:多行/列时侧轴富裕空间的管理(把多行/列看成一个整体)6.flex-flow:f...原创 2019-12-20 20:49:25 · 631 阅读 · 0 评论 -
float:left,display:-webkit-box,display:flex的区别
float:left,display:-webkit-box,display:flex的区别float:left,display:-webkit-box,display:flex都可以实现元素横向排列,但是却存在的一定的区别:HTML代码: <div id="box"> <div class="inner">1</div> <div class...原创 2019-12-15 18:37:53 · 1723 阅读 · 0 评论 -
css时钟
css时钟css代码: *{ margin:0; padding:0; list-style:none } html,body{ height:100%; overflow:hidden } #box{ width:400px; height:400px; border:1px solid; border-radius:50%...原创 2019-12-14 14:27:51 · 206 阅读 · 0 评论 -
animation-timing-function:steps的坑
animation-timing-function:steps的坑animation-timing-function:steps(n,[start | end])。传入一到两个参数,第一个参数把一个关键帧周期分成n等分,然后一个关键帧周期里的动画就会平均的运行。第二个参数start表示从动画的开头运行,相反,end(默认)就表示从动画的结尾开始运行。 #box{ position:re...原创 2019-12-14 14:18:03 · 661 阅读 · 0 评论 -
css动画(animation)
css动画(animation)1.关键帧(@keyframes)1.关键帧(@keyframes)原创 2019-12-14 13:30:51 · 1015 阅读 · 0 评论 -
css倒影(-webkit-box-reflect)
css倒影(-webkit-box-reflect)-webkit-box-reflect属性提供元素倒影:三个参数:参数1:方向:above(向上)below(向下)left(向左)right(向右)。参数2:倒影与元素的间隔(px或者百分比)。参数3:遮盖图片,语法跟background-image差不多。css代码: div{ width:200px; h...原创 2019-12-11 19:30:54 · 1276 阅读 · 0 评论 -
css文字阴影和盒子阴影
css文字阴影和盒子阴影文字阴影:text-shadow(4个参数:水平阴影位置,垂直阴影位置,阴影模糊距离,阴影颜色)。css代码: h1{ font:bold 80px "微软雅黑"; text-shadow:10px 10px 10px red; }HTML代码:<h1>文字阴影</h1>页面效果:注意:text-shadow的参...原创 2019-12-10 20:59:52 · 367 阅读 · 0 评论 -
css文字操作
css文字操作文字描边:-webkit-text-stroke(两个参数,文字颜色,描边厚度):css代码: p{ font:bold 50px/100px "微软雅黑"; color:white; -webkit-text-stroke:2px red; }HTML代码:<p>文字描边</p>页面效果:文字方向:directi...原创 2019-12-10 19:58:46 · 217 阅读 · 0 评论 -
css多棱柱立体旋转
css多棱柱立体旋转css代码: *{ margin:0; padding:0 } html,body{ height:100%; overflow:hidden } #box{ width:450px; height:450px; border:1px solid; position:absolute; left:0; ...原创 2019-12-09 19:48:38 · 549 阅读 · 0 评论 -
css声明的优先级
css声明的优先级1.css样式的三种表示方式2.css中的重要声明3.css的权重1.css样式的三种表示方式内联式(行内、行级):<div style="width:100px;height:100px"></div>嵌入式(内部head标签里的style):<style> div{ width:100px; heig...原创 2019-12-09 19:36:17 · 347 阅读 · 0 评论 -
css立体旋转及注意事项
css立体旋转及注意事项运用transform、transition、perspective相关的css属性,实现简单的立体旋转:HTML代码: <div id="box"> <div id="cube"> <div>前</div> <div>后</div> <div>左</div>...原创 2019-12-08 11:34:31 · 265 阅读 · 0 评论 -
css伪元素
css伪元素::after伪元素在元素之后添加的内容。::before伪元素在元素之前添加的内容。注意:::after ::before每个元素值存在一个多次设置会覆盖上一次的样式,必须存在content属性,个别样式可能还要display:block才能显示。<!doctype html><html lang="en"> <hea...原创 2019-12-07 11:15:56 · 163 阅读 · 0 评论 -
纯css自定义单选按钮
纯css自定义单选按钮<!doctype html><html lang="en"> <head> <meta charset="UTF-8"> <title>单选按钮</title> <style> label{position:relative;float:left;width:100px;...原创 2019-12-06 15:16:20 · 436 阅读 · 0 评论 -
css伪类nth-child和nth-of-type的区别
css伪类nth-child和nth-of-type的区别<!doctype html><html lang="en"> <head> <meta charset="UTF-8"> <style> #aa .aa:nth-child(1){border:1px solid red} #bb .bb:nth-of-type...原创 2019-12-06 15:05:30 · 218 阅读 · 0 评论 -
css伪类
css伪类1.链接伪类2.表单伪类1.链接伪类:link 表示作为超链接,并指向一个未访问的地址的所有锚。:visited 表示作为超链接,并指向一个已访问的地址的所有锚。<!doctype html><html lang="en"> <head> <meta charset="UTF-8"> <title>Doc...原创 2019-12-06 14:52:11 · 361 阅读 · 0 评论 -
纯css伪类实现简单tab栏切换
css伪类实现tab栏切换运用链接元素的==:target==伪类绑定元素id可以实现简单的tab栏切换。原创 2019-12-06 13:08:39 · 327 阅读 · 0 评论 -
css选择器
CSS选择器1.基本选择器2.基本选择器扩展3.属性选择器1.基本选择器通配符选择器(*)。* {margin:0;padding:0}元素选择器(元素名/标签名)。div{background:red}类选择器(.class)。.inner{color:red}id选择器(#id)。#box{border:1px solid}后代选择器(元素下面的子...原创 2019-12-05 16:52:24 · 231 阅读 · 0 评论 -
css基本知识点
css基本知识点1.css简介2.css样式表的组成3.浏览器读取编译css的顺序1.css简介层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。2.css样式表的组成1....原创 2019-12-05 16:01:50 · 178 阅读 · 1 评论