CSS之border-radius - 相关文章

重温CSS：Border属性

边界是众所周知的,有什么新的东西吗?好吧,我敢打赌,在这篇文章中,有很多你不看永远不知道的东西! 不仅可以用CSS3来创建圆角,使用原有CSS一样可以显示自定义图形.这是正确的(有待考究):在过去,没发现这种技术之前,我们可能使用背景图像定位来显示一个园或箭头.幸运的是,我们能放下PS图象处理软件了. 基础你可能很熟悉边的最基本用法. 1 border: 1px solid black; 上面的代码将给元素应用1px的边.即简洁又简单:但我们也可以稍作修改. 1 2 3 border-widt…

通过CSS的border绘制三角形

通过css的border 可以绘制出三角形, 不同的样式组合,有着不同的效果,可以控制它的大小,颜色,方向.看下面各种图形,相信可能还有很多图形,大家都没见过. 先写出公共的样式: .border { ; ; border-color: transparent; border-width: 1rem; border-style: solid; } 在上面的css基础上,添加下面的组合代码,将可以控制三角形的方向: border-left-color: #000; border-right-col…

CSS 的 border 样式

制作过网页的人都有为画线而烦恼的经历,先来认识一下“Border”(画边框),它是CSS的一个属性,用它可以给能确定范围的HTML标记(如TD.DIV等等)画边框,它可以定义边框线的类型.宽度和颜色,利用这个特性,可以制作一些特殊效果.下面把通过实例来说明其应用技巧. 1.给文本加边框上面的示例中,给一段文字加了不同的边框,只是为了说明边框线的颜色.粗细是可变的. 第一个边框的CSS代码是:style="border:thin solid red": “border”后面的三个参数…

利用css的border实现画三角形思路原理

1.利用Css 的border绘制三角形的原理: div的border是有宽度和颜色的,当div的宽度比较大的时候,比如上面代码每个边100像素,颜色又不一样,浏览器怎么渲染颜色呢?经测试发现,宽度较大的border相交时: 1.只有相邻边才会相交,对边是不可能相交的 2.相交区域(显然是矩形)按对角线划分成两个三角形,两个三角形分别渲染成两个边的颜色,颜色不会出现重叠的情况 3.调整四个边的宽度,加上中间区域的宽度,配以不同颜色和透明,各种简单多边形(举一反三)已经不在话下了 <html>&…

css中border画三角形

<!doctype html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name=&qu…

CSS 边框(border)实例

CSS 边框(border)实例:元素的边框 (border) 是围绕元素内容和内边距的一条或多条线. CSS border 属性允许你规定元素边框的样式.宽度和颜色. CSS 边框属性属性描述border 简写属性,用于把针对四个边的属性设置在一个声明.border-style 用于设置元素所有边框的样式,或者单独地为各边设置边框样式.border-width 简写属性,用于为元素的所有边框设置宽度,或者单独地为各边边框设置宽度.border-color 简写属性,设置元素的所有边框中可见部…

css中border制作各种形状

css利用border制作各种形状的原理如图: 使用border绘制三角形是什么原理?事实上,宽度相等的border是以45度对接的,如下图: 没有了上border如图所示: 再设置border的宽度为0: 设置border的高度为0:如图最后设置左右border的颜色为透明,如下图: 贴代码,做个小三角形 <style> .border{ width:; height:; border-bottom:100px solid red; border-left:50px solid trans…

CSS之border绘制三角形

用CSS的border可以画出高质量的三角形. 我们一般会这么使用border: #test-border { width: 100px; height: 100px; margin: 100px auto; background: #fff; border: 2px solid orange; } 得到的效果如下: 因为我们一般设的border-width都很小,导致很多童鞋以为border是四个矩形,然而其实并不是,我们把content的宽度变小,border-width增大,并涂上不同的颜…

理解CSS边框border

前面的话边框是CSS盒模型属性中默默无闻的一个普通属性,CSS3的到来,但得边框属性重新焕发了光彩.本文将详细介绍CSS边框基础样式边框是一条以空格分隔的集合样式,包括边框粗细(边框宽度).边框颜色和边框样式,且先后顺序无关 border: border-width border-color border-style border: 1px solid red; [边框样式] 如果一个边框没有样式,边框将根本不会存在关于虚线dashed,在chrome/firefox下,…

css之border,dispaly

border:即为边框设置 solid:实线 dashed:虚线 dotted:圆点线 css代码: .c1{ width: 100%; height: 50px; border: 25px dotted red ; } 效果图: display:规定元素应该生成的框的类型也有三个重要属性: none:隐藏,不显示框 block:使成为块级标签 inline:使成为内联标签 1.inline:使变成内联标签 css代码: .c1{ background-color: #00a2ca; disp…

CSS用border绘制三角形

使用border绘制三角形的思路,就是border尺寸设置一个较大的值,元素自身的宽高设置为0,全部由边线占据,这样每边就会显示为四分之一块的三角形.这样不借助图片,可以直接绘制出三角形了. 一个栗子: <!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <h…

css的border效果

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> div{width: 100px;height: 100px;margin-top:50px; display: inline-table;} div…

css 利用border 绘制三角形. triangle

1.基础三角形. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>全局css以及辅助css</title> <style type="text/css"> /***1: 初始样式设置*******/ html, body, ul, li, ol, dl, dd, dt, p…

css的border的solid

http://www.w3school.com.cn/cssref/pr_border-style.asphttp://www.w3school.com.cn/tiy/t.asp?f=csse_border-style border-style:dotted solid double dashed; 上边框是点状右边框是实线下边框是双线左边框是虚线 <html><head><style type="text/css">p.dotted {bor…

CSS 利用border三角形绘制方法

CSS 三角形绘制方法,这里面的transparent比较重要,有和没有影响很大: 原理:这个div是由4个三角形组成,每个三角对应一个border,隐藏其它3个border,就可以得到一个三角形. 复制代码代码如下: #triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; /*border: 50px…

HTML+CSS基础 border css属性 Div块盒子

border css属性边框颜色 border-color:red/#ffffff/rgb()默认为黑色边框样式 border-style:solid (实线) dashed (虚线).默认为none 边框粗细 border-width:1 Border的简写 border:border-width border-style border-color: Div块盒子 1.就是标签名.没有特殊的标签属性 2.主要用来排版布局 3.宽度是100%, chrome浏览器默认有8px的外边…

如果用css的border属性画一个三角形

假设页面中有个div,如何通过css做一个三角形.这是我们项目中用到的今天就稍微总结下.顺便说一句偷偷写博客的感觉还挺爽 div { width: 0; height: 0; border-top: 10px solid transparent; border-bottom: 10px solid green; border-left: 20px solid transparent;}我们通过border-top,border-bottom来撑起三角形的昨天那条线一定要记得设置transpare…

CSS之border

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div{ border:100px solid gray; border-top-color:red; border-bottom-color:green; border-right-color:…

css 利用border属性制作箭头 Using Borders to Make Pure CSS Arrows

不再需要多余的图片用border属性自然能创造箭头效果学习地址:http://tech.patientslikeme.com/2010/11/09/using-borders-to-make-pure-css-arrows/…

用CSS的border画三角形

用border画三角形,实际上属于一种奇淫巧技. 利用的是border的一个特性:当一个元素的宽高都为0时,给border设置宽度(至少给2个相邻的边框设置宽度),border就会撑开这个元素. 四个边框同时设置宽度时,四个边最后在元素的中心汇成一个点. 因此当我们给一个有宽高的元素设置border时,四个边框的衔接方式是以对角线形式,而不是直角拼接,如图: 所以不设置宽高,给四个边框分别设置不同的颜色时就可以得到4个不同颜色不同方向的三角形: 想得到一个三角形的时候,不能单独设置一个边框,只设…

CSS之 border 属性

特性 border-width 不支持百分比 border-color 默认颜色是 color border-color 透明值的作用:可利用增加可点击区域,利用内阴影做边框 border 应用: 坐等高布局,不支持百分比宽度支持的关键字: thin(细 1px) medium(默认 3px) thick(厚 5px) 类型(仅介绍有差别的几个) solid : 实线 dashed: 虚线 {chrome: 3:1; IE: 2:1} dotted: 点线 {chrome/fixrf…

CSS中border和outline的区别

border: border-width:1px; border-style:solid; border-color:#ccc; 可以简写为:border:1ox solid #ccc; outline: outline-width:1px; outline-style:solid; outline-color:#ccc; 可以简写为:outline:1ox solid #ccc; 2者的用法相似,但是border是会占据盒子模型的大小,而outline是一个轮廓,不会占据盒子模型的大小.…

巧用css的border属性完成对图片编辑功能的性能优化

一.需求场景: 最近闲来无事,boss提出了一个要求,研究相关代码并完成一个关于编辑图片功能的性能优化,该功能的主要界面展示如下: 通过了几分钟的短暂试用,发现就是一个简单的裁剪并保存用户选择并上传的图片作为用户头像的功能. 主要功能点如下: 选择图片并上传. 拖动中间选择区域的位置或者大小选择设置的图片区域. 点击确定按钮,完成图片设置. 初步一看,貌似没有什么值得优化的地方,通过与boss深入了解后知晓,在选择容量较大(超过10MB)的图片时,浏览器响应速度会变得异常缓慢,具体表现是拖动中…

使用css设置border从中间向两边的颜色渐进效果

1.效果图,设置目录的右框线渐进效果 2.代码 .rightCont>div:nth-child(1){ width: 370px; height: 100%; border-right: 2px solid; border-image: -webkit-linear-gradient(-180deg, rgba(255,255,255,0.00) 0%,#00BBF2 20%, rgba(255,255,255,0.00) 99%) 2 2 2 2; border-image: -moz-li…

【小实现】css after+border实现标签半菱形

<!DOCTYPE html> <html lang="en"> <head> <style> .span-line-begin { background-color: blue; position: relative; margin-right: 8px; } .span-line-begin:after { content: ""; position: absolute; display: inline-block…

CSS利用border绘制图性

绘制梯形 width:10px; border-top:10px solid red; border-right:10px solid transparent; border-left:10px solid transparent; border-bottom:10px solid transparent; 绘制三角形: width:0px; border-top:10px solid red; border-right:10px solid transparent; border-left:1…

【CSS之border-radius】的更多相关文章