css边框 | 易学教程

CSS 控制边框长度

阅读更多关于 CSS 控制边框长度

1、之前碰到一个需求，就是在div的边上有一个小的竖条样式，之前是用一个图片然后使用定位移动到div的边上，这样比较麻烦，后来网上找了找资料，看看是否能用CSS来实现改变边框的长度，大多数都是使用的伪类选择器，但是都是直接贴的代码，正好前阶段遇到这个问题，来写个demo记录一下： 2、思路：我们通过伪类选择器配合content在元素的周围设置内容，我们设置content为 "" ，然后通过修改样式来实现边框的效果。 3、案例：我们首先创建一个div，然后在div左边调一个边框样式：（只需要一个div） < div id = " div1 " > lalala </ div > css：使用伪类选择器： #div1 { width : 200px ; height : 100px ; text-align : center ; line-height : 100px ; } #div1:before { content : '' ; position : absolute ; left : 5px ; bottom : auto ; right : auto ; height : 60px ; width : 3px ; background-color : blueviolet ; } 实现效果：也可以自行调整，宽度高度颜色等等… 你要去做一个大人，不要回头，不要难过。

web前端基础-css-尺寸边框

阅读更多关于 web前端基础-css-尺寸边框

尺寸和边框 : 一、尺寸　　行内元素是不能设置宽和高的，其高度是由元素里面的内容的高度撑起来的；　　行内块元素可以设置宽和高，当行内块元素没有设置宽高的时候，行内块元素的宽高是其默认的宽高；　　块级元素：可以设置宽高，但是如果没有设置宽，则其默认宽度是该块级元素的父级元素的宽度的100%；如果没有设置高度，则该该块级元素的默认高度是由该块级元素内部的内容撑起来的高度，如若块级元素　　　　　　　　中没有内容，则默认高度为；二、溢出处理　　当一个元素里面的内容量过大且该元素的尺寸大小又不足以完全能容纳下该元素里面的内容时，则会发生溢出想象；默认的溢出情况是垂直方向溢出容纳不下的内容，并且将溢出的内容显示出来，代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> div{ width:200px; height:200px; background-color:yellow; } <

CSS3新增的属性有哪些：

阅读更多关于 CSS3新增的属性有哪些：

徐先森讲web CSS3新增的属性有哪些： CSS 用于控制网页的样式和布局。 CSS3 是最新的 CSS 标准。 CSS3新增了很多的属性，下面一起来分析一下新增的一些属性：　　1.CSS3边框： border-radius：CSS3圆角边框。在 CSS2 中添加圆角矩形需要技巧，我们必须为每个圆角使用不同的图片，在 CSS3 中，创建圆角是非常容易的，在 CSS3 中，border-radius 属性用于创建圆角。border：2px solid; box-shadow：CSS3边框阴影。在 CSS3 中，box-shadow 用于向方框添加阴影。box-shadow:10px 10px 5px #888888; border-image：CSS3边框图片。通过 CSS3 的 border-image 属性，您可以使用图片来创建边框。border-image：url(border.png) 30 30 round; 　　2.CSS3背景： background-size：属性规定背景图片的尺寸。在 CSS3 之前，背景图片的尺寸是由图片的实际尺寸决定的。在 CSS3 中，可以规定背景图片的尺寸，这就允许我们在不同的环境中重复使用背景图片。您能够以像素或百分比规定尺寸。如果以百分比规定尺寸，那么尺寸相对于父元素的宽度和高度。 background-origin

盒模型

阅读更多关于盒模型

一、盒模型的概念和组成盒模型是css布局的基石，它规定了网页元素如何显示以及元素间相互关系。css定义所有的元素都以拥有可像盒子一样的外形和平面空间，即都包含边框、边界、补白、内容区，这就是盒模型。 1） padding的使用方法填充：padding,在设定页面中一个元素内容到元素的边缘(边框) 之间的距离。也称补白。用法： 1）用来调整子元素在父元素中的位置关系。注：padding属性需要添加在父元素上。 3）padding值是额外加在元素原有大小之上的，如想保证元素大小不变，需从元素宽或高上减掉后添加的padding属性值。属性值的4种方式：四个值：上右下左 {padding:10px 20px 30px 40px;} 三个值：上左右下 {padding:10px 20px 30px ;} 二个值：上下左右 {padding:10px 20px ;} 一个值：四个方向 padding:2px;/*定义元素四周填充为2px*/ 说明：可单独设置一方向填充，如：上方向padding-top:10px; 右方向pahdding-right:10px; 下方向padding-bottom:10px; 左方向padding-left:10px; 3） margin的使用方法边界：margin,在元素外边的空白区域，被称为边距。 margin-left

CSS-边框-效果

阅读更多关于 CSS-边框-效果

1.1边框　　其中边框圆角、边框阴影属性，应用十分广泛，兼容性也相对较好，具有符合渐进增强原则的特性，我们需要重点掌握。 1.1.1边框圆角　　border-radius 每个角可以设置两个值，x值,y值　　1：边框圆角处理　　2：正方形　　border-radius{ 　　　　width:200px; 　　　　height:200px; 　　　　margin:100px auto; 　　　　background-color:green; 　　　　/* 　　　　border-radius:100px 100px 100px 100px / 　　　　border-radius:50px 100px 50px; 　　　　//四个角都是100px 　　　　border-radius:100px; 　　　　//表示1，3是100px 2,4是50px 　　　　border-radius:100px 50px; 　　　　*/ 　　} 　　　3:椭圆　　　　　　圆角处理时，脑中要形成圆、圆心、横轴、纵轴的概念，正元是椭圆的一种特殊情况。如下图　　　　　　　可分别设置长短半径，以“/”进行分隔，遵循“1，2，3，4”规则，前面的1~4个用来设置横轴半径（分别对应横轴1、2、3、4位置），“/”后面1~4个参数用设置纵轴半径（分别对应纵轴1、2、3、4位置）　　1.1.2边框阴影

9、CSS 盒子模型

阅读更多关于 9、CSS 盒子模型

CSS 盒子模型(Box Model) 所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。 CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。下面的图片说明了盒子模型(Box Model)：不同部分的说明： Margin(外边距) - 清除边框外的区域，外边距是透明的。 Border(边框) - 围绕在内边距和内容外的边框。 Padding(内边距) - 清除内容周围的区域，内边距是透明的。 Content(内容) - 盒子的内容，显示文本和图像。元素的宽度和高度重要: 当您指定一个CSS元素的宽度和高度属性时，你只是设置内容区域的宽度和高度。要知道，完全大小的元素，你还必须添加填充，边框和边距元素的总宽度计算公式是这样的：总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距元素的总高度最终计算公式是这样的：总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距来源： https://www.cnblogs.com/blackfriday/p/8601280.html

CSS盒子模型

阅读更多关于 CSS盒子模型

CSS 盒子模型所有HTML元素都可以看作一个盒子盒子模型的元素：边距，边框，填充，内容元素说明： Margin（外边距）：清除周围的（外边框）元素区域。margin 没有背景颜色，是完全透明的。可以单独改变元素的上，下，左，右边距，也可以一次改变所有的属性。 <div> margin-top:100px; margin-right:100px; margin-bottom:100px; margin-left:100px; </div> 简写： <div> 　　margin:10px 20px 30px 40px; </div> Border(边框):围绕在内边距和内容外的边框 <div> 　　border: 20px solid red; </div> Padding(填充)：定义元素边框与元素内容之间的空间，即上下左右的内边距 <div> 　　padding-top:10px; 　　padding-right:10px; 　　padding-bottom:10px; 　　padding-left:10px; </div> 简写： <div> 　　padding:10px;20px;30px;40px; </div> Content(内容)：盒子的内容，显示文本和图像。元素的计算公式：总元素宽度=元素宽度+左填充+右填充+左边框+右边框+左边距+右边距总元素高度

小小border用处多

阅读更多关于小小border用处多

1.实现梯形利用边框我们可以得到梯形，首先我们给一个div添加边框，当给边框设置四个不同的颜色时，我们可以得到这样的样式，可以看到这里上边框是一个梯形，那么如果我们给其他边框设置颜色为透明(transparent)，就可以得到一个梯形了。梯形的高便是边框的宽度设置。 <!doctype html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div> </div> </body> </html> div{ width:100px; height:100px; margin:80px auto; /*border-top:50px solid pink; border-left:50px solid grey; border-right:50px solid #FFE767;*/ /*border-top:50px solid transparent; border-left:50px solid transparent; border-right:50px solid transparent; border-bottom:50px solid #57BA63;*/ border-top:50px

css-三边框,外边距和内边距

阅读更多关于 css-三边框,外边距和内边距

<div style="width:100px;height:50px;border: solid black 1px;position: absolute;right: 500px; bottom:200px;"></div> <div style="width:100px;height:50px;border: dotted red 3px;position: absolute;right: 500px; bottom:300px;"></div> <div style="border-top-right-radius: 50px;background-color:#9C27B0;border-left-color: gray;border-top-width: 5px;width:100px;height:50px;position: absolute;right: 500px; bottom:400px;"></div> 来源： https://www.cnblogs.com/tingbogiu/p/5530154.html

CSS--border边框颜色渐变

阅读更多关于 CSS--border边框颜色渐变

本人前端小白一枚，写这些心得主要是为了记录自己的前端路上的成长及感悟。废话不多说，平时我们在做边框border时，总能看到界面上一些边框颜色渐变的效果，比较常见的就是qq主菜单界面，我们发现他的边框并不是一条纯色的实线，如果对其进行放大，就可以看到下图所示的内容：可以看到，其实它的边框是由7条宽度为1像素的实线堆叠起来的，最终达到颜色渐变的效果。在css中，如果一条边框线有n像素的宽度，那么就可以对其设置n种不同的颜色。在代码中，我们可以定义一条宽为7px的实线：border: 7px solid #C8C8C8;（不要在意此处设置的颜色，在firefox中后面的代码中会被新设置的颜色覆盖掉）如果对border中四边的边框同时设置渐变的颜色，如下述代码所示： <html> <head> <style> div{ height: 100px; width: 100px; border: 7px solid red; border-color: red green yellow black; } </style> </head> <body> <div></div> </body> </html> 运行html文件后，我们得到的效果如下：代码会将我们设置的颜色自动分配给 top、right、bottom、left，以顺时针的形式分配。如果我们只设置3个颜色，那么结果显而易见

订阅 css边框