边框背景

目录 1.css属性相关 1.1 背景属性 1.2 边框 1.3 border-radius 1.4 display属性 1.5 css盒子模型 1.5 float 1.6 clear 清除浮动 1.7 overflow溢出属性 1.8 定位(position) fixed（固定） 1.9 Z-index 1.10 opacity 前端之CSS（二） 1.css属性相关 1.1 背景属性 /*背景颜色*/ background-color: red; /*背景图片*/ background-image: url('1.jpg'); /* 背景重复 repeat(默认):背景图片平铺排满整个网页 repeat-x：背景图片只在水平方向上平铺 repeat-y：背景图片只在垂直方向上平铺 no-repeat：背景图片不平铺 */ background-repeat: no-repeat; /*背景位置*/ background-position: left top; /*background-position: 200px 200px;*/ 支持简写： background:#336699 url('1.png') no-repeat left top; 1.2 边框 边框属性 border-width border-style border-color #i1 { border

2019年10月11日14:08:35 以下页面为您提供了一些使用广泛的PhpSpreadsheet食谱。 请注意，这些文件没有提供有关特定PhpSpreadsheet API函数的完整文档，而只是一个起步。 如果您需要特定的API函数，请参阅 API文档 。 例如， 设置工作表的页面方向和大小可 将页面方向设置为A4。 其他纸张格式（例如US Letter）不在本文档中讨论，而是在PhpSpreadsheet API文档中讨论 。 设置电子表格的元数据 PhpSpreadsheet提供了一种使用文档属性访问器来设置电子表格的元数据的简便方法。 电子表格元数据可用于在文件存储库或文档管理系统中查找特定文档。 例如，Microsoft Sharepoint使用文档元数据在其文档列表中搜索特定文档。 设置电子表格元数据的操作如下： $spreadsheet->getProperties() ->setCreator("Maarten Balliauw") ->setLastModifiedBy("Maarten Balliauw") ->setTitle("Office 2007 XLSX Test Document") ->setSubject("Office 2007 XLSX Test Document") ->setDescription( "Test document for

在这张图中，我们发现我们设置的300*400出现在了最里面的那个蓝框中，与此同时我们可以发现在这个盒模型中除了我们设置的内容（content），还有margin（外边距）、border（边框）、padding（内边框） margin(外边距) - 清除边框外的区域，外边距是透明的。 border(边框) - 围绕在内边距和内容外的边框。 padding(内边距) - 清除内容周围的区域，内边距是透明的。 content(内容) - 盒子的内容，显示文本和图像。 为了正确设置元素在所有浏览器中的宽度和高度，你需要知道盒模型是如何工作的。 而我们在测试效果图看到的350*450盒子， 350（width） = 300（content） + 20（padding）* 2 + 5（border）* 2 450（height）= 400 （content）+ 20（padding）* 2 + 5（border）* 2 css的两种盒模型 而引起上面效果的原因来自于 css 的两种盒模型的不同，这里我先对两种盒模型做个介绍。 W3C的标准盒模型 在标准的盒子模型中，width指content部分的宽度 IE的盒模型 在IE盒子模型中，width表示content+padding+border这三个部分的宽度 我们可以看出我们上面的使用的默认正是W3C标准盒模型

这里涉及到了圆角和渐变色两个属性。 1.圆角：border-radius border-radius 属性是一个简写属性，用于设置四个 border-*-radius 属性。 2.渐变：linear-gradient linear-gradient() 函数用于创建一个线性渐变的 "图像"。 为了创建一个线性渐变，你需要设置一个起始点和一个方向（指定为一个角度）的渐变效果。你还要定义终止色。终止色就是你想让Gecko去平滑的过渡，并且你必须指定至少两种，当然也会可以指定更多的颜色去创建更复杂的渐变效果。 所以通常情况下认为的最简便的方法是：直接在具有圆角边框的属性下使用border-image来控制渐变，但这样是错误的。 有过经验的朋友会发现border-radius会出现属性失效的情况，因为两个属性看似是控制两个效果，但实际操作却都是操作了border边角。 所以目前大众化且普遍的做法如下： 采用遮罩显示的方式，渐变为底色背景，内层填充，未被遮挡的部分自然就显示为圆角边框。 具体操作方式有多种如： （1）两个div控制，一个渐变背景板一个内层填充 （2）一个div通过after伪类元素添加渐变背景板 （3）利用div的盒模型属性content-box, padding-box使用渐变和填充 以上三个方法均可实现圆角渐变边框，目前的普遍做法也是如此。 但是以上方式有个致命的缺点

css样式 文字与文字样式:单位与颜色、text、font p{ font-size:12px; color:blue; font-weight:bold;} css样式常用单位： px; 像素 em：1em一个字符 行高（自动适应用户所使用的字体） %：百分比 1.颜色 red,blue,green 颜色名： http://www.w3school.com.cn/cssref/css colors legal.asp rgb(x,x,x) RGB值 每个颜色分量取值0-255 红色：rgb(255,0,0) 灰色：rgb(66,66,66) rgb(x%,x%,x%) RGB百分比值 0%-100% 红色：rgb(100%,0%,0%) rgba(x,x,x,x) RGB值，透明度 a值：0.0（完全透明）与1.0（完全不透明） 红色半透明：rgba（255,0,0,0.5） #rrggbb 十六进制数 红色:#ff0000 红色：#f00 去掉重复位 2.文本 color 文本颜色 red #f00 rgb(255,0,0) letter-spacing 字符间距 2px -3px line-height 行高 14px 1.5em 120% text-align 对齐 center left right justify text-decoration 装饰线 none

border-image是一种简写属性，可让您使用图像或CSS渐变作为元素的边框。 .module { border-image: url(border.png) 25 25 round; } 当border-collapse设置为collapse时，border-image属性可以应用于任何元素，但内部表格元素(例如tr，th，td)除外。 属性 border-image唯一必需属性的简写是border-image-source。 如果未指定，则其他属性默认为其初始值。 这些是按顺序排列的边框图像属性： border-image-source .module { border-image-source: url(border.png); } 　　 此属性指定边框图像的来源。 这可以是URL，数据URI，CSS渐变或嵌入式SVG(尽管对嵌入式SVG的支持受到限制，请参阅SVG使用说明)。 初始值为none。 border-image-slice .module { border-image-source: url(border.png); border-image-slice: 20; } 　　 此属性的值告诉浏览器在哪里“切片”图像以创建边框。 图像分为9个部分-四个角，四个边和中心。 带有以红色标记的切片线的边框图像(放大以显示细节)。 该属性最多接受四个正的无单位数字或百分比

css，层叠样式表 CSS层叠性 所谓层叠性是指多种CSS样式的叠加。 是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉 比如先给某个标签指定了内部文字颜色为红色，接着又指定了颜色为蓝色，此时出现一个标签指定了相同样式不同值的情况，这就是样式冲突。 1.样式冲突，遵循的原则时就近原则 2.样式不冲突，不会层叠 CSS继承性 子承父业 所谓继承性是指书写CSS样式表时，子标签会继承父标签的某些样式，如文本颜色和字号。想要设置一个可继承的属性，只需将它应用于父元素即可。 适当使用，不可滥用，好处减低了css的复杂度，子元素可以继承父元素的哪些样式(color,text-,font-,line-) CSS优先级 定义CSS样式时，经常出现两个或更多规则应用在同一元素上，这时就会出现优先级的问题。 继承样式的权重为0，即在嵌套结构中，不管父元素的权重多大，被子元素继承是，权重都为0. 行内样式优先。行内样式权重相当高 权重相同时，层叠行，就近原则 css有一个命令 !important 优先级最大 ### CSS的特殊性(Specificity) 关于css 的权重，我们需要一套公式，就叫CSS的特殊性(Specificity)，我们称之为css特性或非凡性 css特性有四个数字组成，从左到右，左边最大，数位没有进制

CSS 1.CSS介绍 现在的互联网前端分三层： HTML:超文本标记语言.从 语义 的角度描述页面 结构 . CSS:层叠样式表.从 审美 的角度描述页面 样式 . JS:JavaScrpit.从 交互 的角度描述页面 行为 . CSS：Cascading Style Sheet，层叠样式表。CSS的作用就是给HTML页面标签添加各种样式， 定义网页的显示效果 。简单一句话：CSS将网页 内容和显示样式进行分离 ，提高了显示功能。 HTML的缺陷: 不能适应多种设备 要求浏览器必须智能化足够庞大 数据和显示没有分开 功能不够强大 CSS优点: 使数据和显示分开 降低网络流量 使整个网站视觉效果一致 使开发效率提高(耦合性降低) CSS语法 每个css样式由两个组成部分:选择器和声明.声明包括属性和属性值,每个声明之后用分号结束 h1{color:red;font-size:14px 选择器{css样式:样式对应的值} 2.CSS的引入方式 行内样式 在<body>标签内引入 <div> <p style="color: green">我是一个段落</p> </div> 内接样式 在<head>标签内引入 <style > span{ color: yellow; } </style> 外界样式-链接式 在<head>标签内引入 <link rel="stylesheet"

目录 CSS样式 1. 高度宽度 2. 字体属性 文字字体 font-family 文字大小 font-size 文字字重(粗细) font-weight 字体颜色 3. 文本 文本对齐 text-align 文字装饰 text-decoration 首行缩进 text-indent 练习： 4. 背景图 background 练习： 5. 边框 border 属性： 练习： 6. display属性 练习： 7. 盒子模型 margin外边距 padding内边距 练习： 8. float 浮动 练习： 9. overflow 溢出属性 练习： 10. 定位 position z-index 层级 opacity 标签透明度 圆形头像 CSS样式 1. 高度宽度 width:200px; # 宽度。50% 按父级标签的宽度百分比来算 height:200px; # 高度 块级标签才能设置宽度，内联标签的宽度由内容来决定。 2. 字体属性 文字字体 font-family font-family可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。浏览器会使用它可识别的第一个值。 p { font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif } 文字大小 font-size

今天学习了css样式的边框样、背景样式、超链接样式、列表样式 一、边框样式 1.边框的宽度 border-width 2.边框的外观（实线 solid、虚线dashed、点线dotted、边框双线double、无样式none） 3.边框颜色 border-color 4.简单写法border：1px solid red 5.局部边框样式; border-top border-bottom border-left border-right 二、背景样式 background-color 背景颜色 background-image 背景图片 background-repeat 显示方式（不平铺no-repeat、水平方向平铺repeat-x、垂直方向平铺repeat-y） background-attachment 是否随内容而滚动 三、超链接样式 a:link 定义a元素未访问时的样式 a:visited 定义a元素访问后的样式 a:hover 定义鼠标经过显示的样式 a:active 定义鼠标单击激活时的样式 定义这4个伪类，必须按照(link、visited、hover、active)LVHA的顺序进行，不然浏览器可能无法正常显示这4种 样式 四、列表样式 列表项符号list-style-type 1. 有序列表 语法: <ol type=""> <li>有序列表项</1i>