CSS3最详解
关注
分享
扫一扫
想看详解你就来！！
贵哥的编程之路(热爱分享)
我是陈业贵。择一业，终二十年。子幼，看父敬子 子行 看子敬父。以后靠我了[呲牙][呲牙]。父母老了
展开
-
详解：56 transform: translate
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>移动元素</title> <link rel="stylesheet" type="text/css" href="css/reset.css"/> <style type="text/css"> div{ width: 200px; height:原创 2020-08-20 00:08:22 · 825 阅读 · 1 评论 -
详解：55 transfrom-origin
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>transfrom-origin</title> <link rel="stylesheet" type="text/css" href="css/reset.css"> <style type="text/css"> div{ width: 200px;原创 2020-08-19 23:58:44 · 543 阅读 · 2 评论 -
详解54 transform: rotate()；
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> div /*核心:这些都是以div正中心开始旋转的.仔细看看文字,记住每一个文字开始都是在左上角为0deg。 你可以理解四个角是0deg 90deg 180deg 270deg,注意一下原点原创 2020-08-19 23:39:15 · 788 阅读 · 1 评论 -
详解：53 radial-gradient
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> div{ width: 300px; height: 200px; border:5px solid gray; margin:30px auto; } .box1 { backgrou原创 2020-08-18 00:55:21 · 802 阅读 · 1 评论 -
详解：52 repeating-linear-gradient
Document 首页`在这里插入代码片`原创 2020-08-15 00:21:08 · 974 阅读 · 0 评论 -
详解：51 指定渐变颜色的起始点和使用多个颜色 len-gradient
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> div{ width: 400px; height: 400px; border:2px solid #abcdef;原创 2020-08-10 23:48:25 · 738 阅读 · 0 评论 -
详解：50 deg-gradient
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .container{ width: 960px; margin:100px auto; }原创 2020-08-10 23:41:54 · 712 阅读 · 0 评论 -
css3详解:48 linear gradient
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>线性渐变-linear gradient</title> <link rel="stylesheet" type="text/css" href="css/reset.css"/> <style type="text/css"> .container{ w.原创 2020-08-05 22:50:31 · 531 阅读 · 0 评论 -
详解47：box-sizing
1.CSS3中新增了一个box-sizing属性, 这个属性可以保证我们给盒子新增padding和border之后,记住，边框不算在内哈，记住，保持不变的是content哈, 盒子元素的宽度和高度不变 2.box-sizing属性是如何保证增加padding和border之后, 盒子元素的宽度和高度不变 和我们前面学习的原理一样, 增加padding和border之后要想保证盒子元素的宽高不变, 那么就必须减去一部分内容的宽度和高度原创 2020-08-04 00:13:05 · 629 阅读 · 0 评论 -
css3最详解46 background-size
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>background-size</title> <link rel="stylesheet" type="text/css" href="css/reset.css"/> <style type="text/css"> div{ width: 500px;原创 2020-08-04 00:12:23 · 524 阅读 · 0 评论 -
详解：45 background-clip text-fill-color
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" type="text/css" href="css/reset.css"/> <style type="text/css"> .cool-text{ width: 800px;原创 2020-07-26 00:51:12 · 764 阅读 · 0 评论 -
详解：44 background-clip
//裁剪成白色哈，border的属性比如solid之类的不会裁剪。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>background-clip</title> <link rel="stylesheet" type="text/css" href="css/reset.css"/> <style type="text原创 2020-07-26 00:49:44 · 462 阅读 · 0 评论 -
详解：43 background-origin
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" type="text/css" href="css/reset.css"/> <style type="text/css"> div{ width: 600px; heig原创 2020-07-26 00:41:28 · 419 阅读 · 0 评论 -
详解：42 background-position 记住，是左右上下的顺序的哈
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" type="text/css" href="css/reset.css"/> <style type="text/css"> div{ width: 500px; height:原创 2020-07-26 00:39:25 · 989 阅读 · 2 评论 -
详解：41 background-attachment
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" type="text/css" href="css/reset.css"/> <style type="text/css"> div{ height: 150px; bor原创 2020-07-26 00:36:57 · 460 阅读 · 0 评论 -
详解：40 background-repeat
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" type="text/css" href="css/reset.css"/> <style type="text/css"> div{ width: 500px; heig原创 2020-07-26 00:08:50 · 519 阅读 · 0 评论 -
详解：39 css3新增颜色属性 hsl hsla rgb rgba
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> div { width: 300px; height: 300px; border: 1px solid red; } .box1 { background-color: #000;原创 2020-07-25 00:53:21 · 593 阅读 · 0 评论 -
详解：38 tab-size
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" type="text/css" href="css/reset.css"/> <style type="text/css"> .test1{ -moz-tab-size:4;tab-原创 2020-06-16 00:02:36 · 488 阅读 · 1 评论 -
详解：37 text-align-last的案例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" type="text/css" href="css/reset.css"/> <style type="text/css"> .test{ margin:150px; }原创 2020-06-15 23:59:37 · 544 阅读 · 1 评论 -
详解：36 text-align-last 最后一行调整
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>text-align-last</title> <link rel="stylesheet" type="text/css" href="css/reset.css"/> <style type="text/css"> body{ font:18px sans-原创 2020-06-15 23:50:11 · 750 阅读 · 2 评论 -
详解：35 text-align direction
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>text-align</title> <link rel="stylesheet" type="text/css" href="css/reset.css"/> <style type="text/css"> p{ border:1px solid red;原创 2020-06-15 23:44:07 · 680 阅读 · 0 评论 -
详解：34word-wrap
兄弟们，你们看着啊总结：核心：截断word-wrap: break-word;也可以写成overflow-wrap: break-word;一样的哈，word-break: break-all;核心是：内容在宽度的邻界点就自动换行了哈（注意点，也就是说宽度邻界点那里放不下将要显示在这里的字符就换航了呀注意点来了，单词呢怎么说？也截断，放不下的汉子和单词都截断效果：第二个：word-bre...原创 2020-04-30 14:32:38 · 1791 阅读 · 5 评论 -
详解：33案例（qq新闻）
核心之点：counter:是css计数器，只能跟content属性在一起使用的时候才起作用，而content属性专用在before/after伪元素上核心之点：我举个例子把，好吧<style> .box{width:300px; height:200px; background:#000; color:#fff; padding:30px;} p{f...原创 2020-04-30 13:44:07 · 455 阅读 · 4 评论 -
详解：32text-overflow各种值
核心知识点;第一个classbox1我不讲你也懂是吧那第二个呢？他是what？overflow:hidden;它代表超过我们所定义的宽高就会超过的部分会被裁剪。第三个呢？若为text-overflow:clip 简单的裁切若为text-overflow:ellipsis 当对象内文本溢出时（超过宽高时）显示省略标记(…) ，我的理解是裁剪然后用。。。代替超过的部分最后说一句，不要嫌...原创 2020-04-29 13:36:37 · 717 阅读 · 1 评论 -
详解：31 king案例
核心：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <link href='http://fonts.googleapis.com/css?family=Mr+Dafoe' rel='s...原创 2020-04-29 13:24:37 · 418 阅读 · 1 评论 -
详解：30 text-shadow的开端
核心知识点是：text-shadow：x y 模糊的大小 模糊的颜色，请大家记住一点：xy可以负数形式出现嘿嘿。核心是复制哈<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>text-shadow</title> <lin...原创 2020-04-28 14:54:48 · 412 阅读 · 1 评论 -
详解：28 box-shadow开端
/这是比如pink的宽150高150的东西，然后是x往右20 往下50的移动/兄弟们,记住一句核心：右下为正，左下为负。记住哈，兄弟们，移动只有两个哈，xy轴<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>box-shadow</t...原创 2020-04-28 09:48:25 · 447 阅读 · 1 评论 -
详解：27 border-image边框背景案例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>border-image边框背景</title> <link rel="stylesheet" type="text/css" href="css/reset.css"/>...原创 2020-04-28 09:23:58 · 519 阅读 · 2 评论 -
详解：26 border-image
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> div { width: 400px; ...原创 2020-04-28 09:07:08 · 487 阅读 · 2 评论 -
详解： 25 最难点： border-collapse: separate;
table代表这是一个表格tr标签代表整个表格中的一行数据，只要一行都是属于他的，无论多长多一样td代表单元格border-collapse: separate;核心是为外边距合并起来，要设置在table那里就能合并所有的单元格了记住，只能设置在table中。但是合并所有单元格，设置在tr或者td标签中无用。border-spacing: 5px;核心是设置相邻单元格的边框间的距离，记住...原创 2020-04-28 00:30:22 · 3442 阅读 · 3 评论 -
详解：24 圆角的变化，对你的加深margin理解可能会有可能
核心：margin:100px auto;核心在于有两个参数，第一个为上下，第二个为左右，，上下代表上下都为100哈，问题？为什么下也为100px呢，因为你看哈怎么实现的呢？<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>圆角<...原创 2020-04-28 00:16:32 · 543 阅读 · 2 评论 -
详解： 23 border-radius以border为基点（变化点）
核心： border-radius: 60px 40px 20px 10px /30px 20px 10px 5px;是什么？/第一个是60 30是左上角把，是水平60垂直30.。/依次比较border-radius: 40px;代表什么？代表左上角 右上角 右下角 左下角四个都水平垂直为40px。border-width: 20px 30px 0px 50px;代表上 右 下 左哈b...原创 2020-04-26 23:37:17 · 501 阅读 · 1 评论 -
详解：22 border-radius
核心：记住，如果只写一个的话，代表四个角都变化记住：如果写两个的话。代表左上角与右下角一样，右上角与左下角一样记住：如果三个值的话，代表左上角 右上角 左下角如果四个值的话，代表顺时针，从左上角----右上角—右下角—左下角记住：border-top-left-radius: 80px 40px;这样的，都是上下然后左右的写的时候勒，80px是水平，然后是40px垂直<...原创 2020-04-26 23:28:01 · 486 阅读 · 1 评论 -
详解：21 计数器
核心：counter-reset意思：定义变量，一个变量对应一个值，不写值默认为0 变量名 值 变量名 值 记住啊，不需要,写,就错了！！！写,代表终止了哈counter-increment意思：累加，也就是说每次加几，不写默认+0content意思：内容，也就是说文字counter意思：用来显示计数器的结果的啊记住：counter()函数必须和content属性一起使用记住，...原创 2020-04-26 14:22:35 · 1181 阅读 · 1 评论 -
详解：20 :before :after attr
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> .test1:after/*attr根据属性找到属性值*/ { ...原创 2020-04-26 11:18:29 · 633 阅读 · 1 评论 -
详解：19 ::selection
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> ::selection { ...原创 2020-04-26 10:56:57 · 524 阅读 · 1 评论 -
详解：18:in-range :out-of-range
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style type="text/css"> input[type="number"]:in-range ...原创 2020-04-26 10:43:35 · 586 阅读 · 1 评论 -
详解：17 :valid :invalid
核心：这里记住了哈，作用的可是type=“email”<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> input[type="ema...原创 2020-04-26 10:35:38 · 601 阅读 · 1 评论 -
详解： input[type="类型是什么"] 16
核心：记住哈，:required与:optional对单选框和复选框，自己的理解，无效哈核心：最核心的点来了为什么单选按钮要两个name一样的呢？因为两个name一样代表只能有一个啊，name两个是不是最后一个会覆盖前一个，对了嘛是把比如两个一样的变量是不是会覆盖成为一个呢，所以一个就是单选按钮啊懂？复选框为什么要两个都一样?我的理解是我试来一下，不一样也行，我的理解就是这样，有个性...原创 2020-04-26 10:30:59 · 618 阅读 · 1 评论 -
详解：:required :optional 15
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> input:required { ...原创 2020-04-26 10:18:40 · 1289 阅读 · 1 评论