css边框

CSS 盒子模型(Box Model)

阅读更多关于 CSS 盒子模型(Box Model)

CSS 盒子模型(Box Model) 所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。定义 CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。图解 Margin(外边距) - 清除边框外的区域，外边距是透明的。 Border(边框) - 围绕在内边距和内容外的边框。 Padding(内边距) - 清除内容周围的区域，内边距是透明的。 Content(内容) - 盒子的内容，显示文本和图像。来源： CSDN 作者： L归子莫链接： https://blog.csdn.net/qq_45163122/article/details/104123278

css(五)之标准流

阅读更多关于 css(五)之标准流

文章目录网页布局本质 css盒子模型盒子组成边框内边距外边距嵌套块元素垂直外边距的塌陷清除内外边距代码圆角边框盒子阴影网页布局本质网页布局就是由一个又一个的盒子组成的，盒子包括标准流，浮动和定位。下面有个口诀：列找标准流行找浮动飘动找定位 css盒子模型网页布局的核心就是盒子。盒子组成边框是由粗细，样式，颜色组成。 border : border-width | border-style | border-color 属性作用 border-width 定义边框粗细，单位是px border-style 边框的样式 border-color 边框的颜色 border-style：solid(实线边框)，dashed(虚线边框)，dotted(点边框) border-color：red 复合写法： border : 3px solid red 内边距设置盒子中的内容和边框的距离。属性作用 padding-left 左内边距 padding-right 右内边距 padding-top 上内边距 padding-bottom 下内边距复合写法：值的个数表达意思 padding:5px; 1个值，代表上下左右都有5像素内边距 padding:5px 10px; 2个值，代表上下内边距是5像素，左右内边距是10像素; padding

css鼠标移入底部边框展开效果

阅读更多关于 css鼠标移入底部边框展开效果

经常看到这种效果，就研究了下。 <a href='' class='tag'>测试一下吧</a> .tag { text-decoration:none; position:relative; padding:10px } .tag:after{ content:''; position:absolute } .tag:after { border-bottom:2px solid #333; left:51%; right:51%; bottom:0px; transition: all .2s; } .tag:hover:after { left:0%; right:0% } 来源： CSDN 作者：陈星波链接： https://blog.csdn.net/c2635222586/article/details/87025765

【原】移动web点5像素的秘密

阅读更多关于【原】移动web点5像素的秘密

最近和一个朋友聊天，朋友吐露了工作上的一些不开心，说自己总是喜欢跟别人比较，活得比较累，这种感觉大部分人经历过，往往觉得是自己心态不好，其实不然，这是人性，此时应该快速摆脱这种状态，想到DOTA大9神的笔录，游戏也是人生，懂得思考的人生才会不断促使自己进步，详细我不清楚了，大概意思是这样：人这一辈子就一次，快乐很重要，人如何感受到快乐，说起来真的不难，有两个点，一点是“你能够让别人喜欢你”；另外一点是“跟好朋友一起时你能够卸下面具”，是怎么样的就怎么样。希望能给不开心的同学寻找一丝帮助~ 回到今天的主题.5px (0.5px简写为.5px) ，可能大家听过 .9 ，它是android平台应用软件开发里的一种特殊图片形式，本文的.5指如何使用css实现.5px的线条 ~ 目录你可能不知道的.5px border属性不支持.5px吗实现.5px的线条实现.5px的圆角边框你可能不知道的.5px 移动web设计中，在retina显示屏下网页会由1px会被渲染为2px，那么视觉稿中1px的线条还原成网页需要css定义为.5px 。文章开头的漫画中，细心的设计师发现粗线条并吐槽，前端哥的理由是因为css的border-width不支持.5px，所以用了1px来替代，最终渲染为2px的粗线条，这个问题往往会被忽视，从而导致移动网页中普遍存在2px的粗线条。

阅读更多关于 CSS边框

/* div{ width: 600px; height: 600px; background-color: darkseagreen; /* 边框大小：默认1px*/ /* border-width: 10px; */ /* 边框颜色 : 默认黑色*/ /* border-color: darkviolet; */ /* 边框样式：不写边框样式，不生效*/ /* border-style: solid; */ /* 复合写法 */ /* border:边框宽度边框样式边框颜色 */ /* border: */ /* 10px solid black; */ /* } */ /* div{ width: 600px; height:600px; /* background-color: darkseagreen; */ /* border-top: 300px solid black; border-left:300px solid transparent; border-right: 300px solid transparent; border-bottom: 300px solid transparent; */ /* } */ div{ width: 100px; height: 100px; background-color: blanchedalmond;

CSS

阅读更多关于 CSS

一什么是CSS 1.1 什么是CSS 层叠样式表(Cascading Style Sheets)：是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言； CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化； CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力（字体、边框、颜色、边距、高度、宽度、背景图片、网页定位、网页浮动…） 1.2 如何学习CSS CSS是什么 CSS怎么用（快速入门） CSS 选择器（重点 + 难点）美化网页（文字，阴影，超链接，列表，渐变….）盒子模型网页基础~ 浮动应用~ 定位网页动画（特效效果） 1.3 发展史 1.CSS1.0 2.CSS2.0 DIV（块） + CSS，HTML 与 CSS 结构分离的思想，网页变得简单，SEO 3. CSS2.1 浮动，定位 4. CSS3.0 圆角，阴影，动画…. 浏览器兼容性~ 1.4 快速入门：三种导入方式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>三种导入方式</title>  <style> h1 { color :

纯CSS实现各类气球泡泡对话框效果

阅读更多关于纯CSS实现各类气球泡泡对话框效果

抄自 http://www.zhangxinxu.com/wordpress/?p=651 边框法我们首先来看下面一段样式代码： .test{width:10px; height:10px; border:10px solid; border-color:#ff3300 #0000ff #339966 #00ff00;} 当某个div应用了上面这个样式后，结果会如何？见下图（截自Firefox3.5，IE浏览器有细节上的差异）：仔细观察边框色的交界处，四个角落有4个45°的斜边，将整个边框分成了四个等腰梯形。现在，设想一下，如果我们现在只保留一个一个上边框，其余边框均transparent透明（或与背景色同色），那么是不是就只显示一个上面红色的边框了，我们测试下，与上面类似的代码，只是修改下其余三个边框的颜色。 .test{width:10px; height:10px; border:10px solid; border-color:#ff3300 #ffffff #ffffff #ffffff;} 结果如下图（截自Firefox3.5）：可见显示结果正如我们预想的。现在，再次开动脑筋，试想下，如果上面样式中的宽度和高度都是0，也就是 width:10px; height:10px; 变成了 width:0; height:0; 。对了，那么显示的将不会是个等腰梯形了

css实现有边框的三角形

阅读更多关于 css实现有边框的三角形

1、html  <div class="border-up"> <span></span> </div>  <div class="border-down"> <span></span> </div>  <div class="border-left"> <span></span> </div>  <div class="border-right"> <span></span> </div> 2、css .border-up { width: 0; height: 0; border-left: 30px solid transparent; border-right: 30px solid transparent; border-bottom: 30px solid #333; position: relative; margin: 50px auto; } .border-up span { display: block; width: 0; height: 0; border-left: 28px solid transparent; border-right: 28px solid transparent; border-bottom: 28px solid

css实现有边框有出口的三角形

阅读更多关于 css实现有边框有出口的三角形

1、html   <div class="border-up-empty"> <span></span> </div>  <div class="border-down-empty"> <span></span> </div>  <div class="border-left-empty"> <span></span> </div>  <div class="border-right-empty"> <span></span> </div> 2、css .border-up-empty { width: 0; height: 0; border-left: 30px solid transparent; border-right: 30px solid transparent; border-bottom: 30px solid #333; position: relative; margin: 50px auto; } .border-up-empty span { display: block; width: 0; height: 0; border-left: 28px solid transparent; border-right: 28px

css用边框实现圆角矩形

阅读更多关于 css用边框实现圆角矩形

今天要做一个圆角矩形的按钮，于是直接找圆角矩形的css实现方式，搞了半天，虽然也实现效果了，但是很复杂，需要用很多代码，后来突然想到以前做过的一个边框效果，也是圆角矩形，于是找了出来，发现这种办法相当简单并且效果一点也不差，这里简要分享一下。关键部分都有注释。 [html] view plain copy <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" > < html > < head > < title > div+CSS圆角矩形 </ title > < meta http-equiv = "Content-Type" content = "text/html; charset=UTF-8" /> < style type = "text/CSS" > .roundedRectangle{ height: 70px; width: 100px; margin-top: 100px; background: #9BD1FA;//背景色 border-width: 10px; //边缘的宽度，如果要分别设置可以这样：border-width: 15px 5px 15px 5px;依次为上、右、下、左

订阅 css边框