css边框 | 易学教程

CSS-border属性

阅读更多关于 CSS-border属性

CSS-border属性设置边框 border有三个值 1 border-width //规定边框的宽度 2 border-style //规定边框的样式 3 border-color //规定边框的颜色如果不设置其中的某个值，也不会出问题，比如 border:solid #ff0000; 也是允许的。 border-radius设置圆角 border-radius:10px //设置四个角也可以选择设置 1 border-top-left-radius: 10px //左上角 2 border-top-right-radius: 10px //右上角 3 border-bottom-right-radius: 10px //右下角 4 border-bottom-left-radius: 10px //左下角来源： https://www.cnblogs.com/qdjj/p/12425883.html

css排版常用样式、三种不同html类型、css布局盒模型介绍

阅读更多关于 css排版常用样式、三种不同html类型、css布局盒模型介绍

把CSS样式与网页编排通过网页排版中主要格式化要素实现网页实用性与欣赏性相结合，实现出设计效果。字体：div{font-family: "Microsoft Yahei";}为网页中的文字设置字体为微软雅黑,这里注意不要设置不常用的字体，因为如果用户本地电脑上如果没有安装你设置的字体，就会显示浏览器默认的字体。（因为用户是否可以看到你设置的字体样式取决于用户本地电脑上是否安装你设置的字体。）现在一般网页喜欢设置“微软雅黑”，如下代码：body{font-family:"Microsoft Yahei";}或body{font-family:"微软雅黑";}注意：第一种方法比第二种方法兼容性更好一些。当然了如果你想用特殊字体怎么办了？通过css3的自定义字体实现@font-face{ font-family:dhnblog;src:url('images/fzm.ttf');}/*自定义字体类型*/ 字号、颜色：div.box{font-size: 14px;color: #f90;} 设置网页中文字的字号为14像素，并把字体颜色设置为#f90；此外颜色分为3种表现形式：a.rgb（255,255,255）b.英文单词c.16进制，如#f90，具体参考 css基本概念与css核心语法介绍中有关颜色介绍粗体：如果想为文字设置粗体除了使用h1-h6或strong标签

前端复习Day4 盒子模型及边框

阅读更多关于前端复习Day4 盒子模型及边框

盒模型一、盒模型的概念和组成盒子模型是CSS的基石,指定标签如何显示以及元素间相互关系；页面上的每个元素都被当成一个矩形盒子,占据一定的页面空间,这个盒子由内容（ content ）、内边距（补白,填充, padding ）、边框（ border ）和外边界（ margin ）组成； 1）padding内填充 padding区域在border与content之间；背景色和背景图像会覆盖padding和content组成的区域； padding的使用方法 padding,在设定页面中一个元素内容到元素的边缘(边框) 之间的距离。也称补白(内填充)。用法： 1）用来调整内容在容器中的位置关系 2）用来调整子元素在父元素中的位置关系。注：padding属性可以添加在父元素上。 3）padding值是额外加在元素原有大小之上的，如想保证元素大小不变，需从元素宽或高上减掉后添加的padding属性值。属性值的4种方式：四个值：上右下左 {padding:10px 20px 30px 40px;} 三个值：上左右下 {padding:10px 20px 30px ;} 二个值：上下左右 {padding:10px 20px ;} 一个值：四个方向 padding:2px; / 定义元素四周填充为2px / 说明：可单独设置一方向填充，如：上方向 padding

CSS盒模型概念及企业应用规则

阅读更多关于 CSS盒模型概念及企业应用规则

css盒模型概念及企业应用规则 1.什么是盒模型盒模型**（ Box Moldel ）****，**是W3C规定一个浏览器如何渲染、显示一个元素，根据元素的种类分为块级元素盒模型和行内元素盒模型 2.标准盒模型的概念分析 2.1width/height（content box内容区）块级元素的width和height值在标准盒模型下，定义了一个块级元素能够存放内容的区域大小，元素的内容从width和height的左上角原点开始排列内容 2.2border（border box边框区）块级元素的border的作用是在元素的内容区外加上一个边框线边框样式的格式为**: broder : 宽度种类颜色 ;/** 复合写法 / border-width :边框宽度 border-style :种类; 默认是none 就是没有边框 /*dotted圆点边框, double双边框, dashed虚线边框,solid实线边框 */ border-color :颜色; 默认与color样式一致 /* 颜色值: 十六进制, rgb, 关键字, transparent(使用父元素的颜色)*/ 2.3border（border box边框区）详解元素的边框可以单独给某一方向设置比如: 设置顶部边框:border-top:宽度种类颜色; 设置底部边框:border

CSS3 border-image详解、应用及jQuery插件

阅读更多关于 CSS3 border-image详解、应用及jQuery插件

一、border-image的兼容性 border-image可以说是CSS3中的一员大将，将来一定会大放光彩，其应用潜力真的是非常的惊人。可惜目前支持的浏览器有限，仅 Firefox3.5，chrome浏览器，Safari3+支持border-image。所以，就本文而言，IE浏览器可以回家休息了，Firefox3及其以下以及Opera浏览器也可以休息去看《阿凡达》了。所以，本文提供的一些demo页面，要在 Firefox3.5+，chrome或Safari3+浏览器下才可以看到效果。二、熟悉border-image的一些特性我们可能对于CSS2中的background属性比较熟悉，例如： background:url(xx.jpg) 27px no-repeat; 指代的是图片(url(xx.jpg))，位置(27px)，重复性(no-repeat)。 border-image于此类似，border-image包括图片，剪裁位置（与background位置一样，也是数值，也支持百分值），重复性。例如： border-image:url(border.png) 27 repeat; ，指的就是图片(url(border.png))，剪裁位置(27)，重复方式(repeat)。试着对比background，这有助于border-image属性的记忆。具体描述border

CSS零基础入门教程缩写优化CSS文件的体积

阅读更多关于 CSS零基础入门教程缩写优化CSS文件的体积

Web网站可用性的关键指标是速度，更确切地说，是页面能以多快的速度出现在访问者的浏览器窗口里。影响速度的因素有很多种，包括Web服务器的速度、访问者的Internet连接情况，以及浏览器必须下载的文件大小。尽管你无法控制服务器和连接的速度，但是你可以控制构成网站Web页面的文件大小。为了让网站能够更快，Web的建设者都会按常规地压缩和优化网站上的每一个图像文件，这常常使得为了将文件的大小减少几个百分点而牺牲了图像的质量。由于CSS样式表是纯文本文件，和图像相比相对较小，所以Web建设者很少考虑采取措施减少其CSS样式表文件的大小。但是，通过使用CSS缩写以及其他的一些简单技巧，你可以在很大程度上减少样式表的大小。在我对自己样式表的一次非正式的特别测试中，我把文件的大小降低了大约25－50％。新建一个前端学习qun438905713，在群里大多数都是零基础学习者，大家相互帮助，相互解答，并且还准备很多学习资料，欢迎零基础的小伙伴来一起交流。使用CSS的缩写性质 CSS的缩写性质（shorthand property）是一些专用的性质名，用来代替多个相关性质的集合。例如，间隙性质（padding property）是顶部间隙（padding-top）、右侧间隙（padding-right）、底部间隙（padding-bottom）和左侧间隙（padding-left）的缩写。

css 盒子模型学习

阅读更多关于 css 盒子模型学习

CSS 盒子模型(Box Model) 所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。 CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。 Margin(外边距) - 清除边框外的区域，外边距是透明的。 Border(边框) - 围绕在内边距和内容外的边框。 Padding(内边距) - 清除内容周围的区域，内边距是透明的。 Content(内容) - 盒子的内容，显示文本和图像。实例演示div { width: 300px; border: 25px solid green; padding: 25px; margin: 25px; } 来源： https://www.cnblogs.com/yx3445/p/12380158.html

CSS(一) CSS背景

阅读更多关于 CSS(一) CSS背景

CSS背景 ---------- 既有css3之前的用法也有css3的用法，没有区分出来哈，我想要速成就没有管这个。 CSS设置背景颜色：属性background-color，这个属性的作用范围是，background-color 属性为元素设置一种纯色。这种颜色会填充元素的内容、内边距和边框区域，扩展到元素边框的外边界（但不包括外边距）。如果边框有透明部分（如虚线边框），会透过这些透明部分显示出背景色。这个器是很关键的。验证如下：margin是没有效果的。 <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="css/backgroud-color.css" /> </head> <body> <div id="div1"><p>this is p</p></div> <div id="div2"><p>this is p</p></div> <div id="div3"><p>this is p</p></div> </body> </html> //css内容 p { margin: 0px; } div { background-color: red; } #div2 { padding: 10px; } #div3 { padding: 10px; border

css如何解决border的重叠问题

阅读更多关于 css如何解决border的重叠问题

我现在在做一个ul列表，然后给每个li加上边框，但是加完了之后，相邻列表的边框就会变成2px，比如第一个li的下边框和第二个li的上边框就会重叠在一起，请问这有什么办法解决一下么？解决方法是：试试给li在样式中指定margin-top:-1px; 这样两个边框就可以重叠在一起了. 新问题：不过我现在这个li是加了hover的，就是鼠标悬停就会边框变色，这样一来，每个变色的只会是上左右三条框，下边框被盖住，看不出效果了~~~~ li { border:1px solid #FF0000; margin-top:-1px; } li:hover { border:1px solid #0000FF; position:relative; z-index:2; } 这个问题在我工作中很常见，百度搜的这种方法感觉还不错，很实用来源： CSDN 作者： jingtian678 链接： https://blog.csdn.net/jingtian678/article/details/104536352

CSS盒模型简述

阅读更多关于 CSS盒模型简述

CSS 盒模型规定了元素框处理元素内容、内填充、边框和外边距的方式。元素框的最内部为内容（content），包围内容的是内填（padding）。内填充呈现了元素的填充区域。内填充的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。内填充、边框和外边距都是可选的，默认值是零，但是，许多元素都默认自带了内填充和外边距我们可以通过将元素的 margin 和 padding 设置为零来覆盖这些浏览器样式,这可以分别进行，也可以使用通配选择器对所有元素进行设置：例如 *{margin:0;padding:0;} 在 CSS 盒模型中，width （宽）和 height（高）指的是内容“区域”的宽度和高度。增加内填充、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。假设框的每个边上有 10 个像素的外边距和 5 个像素的内填充。如果希望这个元素框达到 100 个像素，就需要将内容的宽度设置为 70 像素例如 <style> .box { width : 70px ; height : 70px ; margin : 10px ; padding : 5px ; background : red ; } </style> <div class= "box" ></div> 内填充：元素的内填充在边框和内容区之间， padding

订阅 css边框