border 订阅
《BORDER》是由日本朝日电视台出品,于2014年4月10日首播的一部惊悚悬疑电视剧,共9集。桥本一、波多野贵文执导,金城一纪编剧,小栗旬、青木崇高、南波瑠 、远藤宪一、古田新太、泷藤贤一等主演。该剧讲述了内心倍感空虚和孤独的青年刑警石川安吾一次在例行巡查犯罪现场附近时,被神秘之人开枪击中头部而命悬一线。幸运的是石川最终从死亡线上活转过来,并意外拥有了可以跟死者进行对话的能力,并从此利用这种能力为追寻真相而四处奔走 [1]  。 展开全文
《BORDER》是由日本朝日电视台出品,于2014年4月10日首播的一部惊悚悬疑电视剧,共9集。桥本一、波多野贵文执导,金城一纪编剧,小栗旬、青木崇高、南波瑠 、远藤宪一、古田新太、泷藤贤一等主演。该剧讲述了内心倍感空虚和孤独的青年刑警石川安吾一次在例行巡查犯罪现场附近时,被神秘之人开枪击中头部而命悬一线。幸运的是石川最终从死亡线上活转过来,并意外拥有了可以跟死者进行对话的能力,并从此利用这种能力为追寻真相而四处奔走 [1]  。
信息
集    数
9集
制片地区
日本
主    演
小栗旬,青木崇高,南波瑠 ,远藤宪一,古田新太,滝藤贤一,野间口彻,浜野谦太
上映时间
2014年4月10日(每周四晚9点)
每集长度
45分钟
导    演
桥本一、波多野贵文
其它译名
BORDER 警視庁捜査一課殺人犯捜査第4係
类    型
惊悚、悬疑、侦破
出品公司
朝日电视台
IMDb
tt3512088
中文名
灵魂警探、超能力刑事
首播时间
2014年4月10日
发行公司
朝日电视台
在线播放平台
搜狐
外文名
BORDER
编    剧
金城一纪
出品时间
2014年
拍摄地点
日本
bochs简介
收起全文
精华内容
参与话题
问答
  • border(元素边框详解)

    千次阅读 2019-03-21 20:03:20
    border的属性: width:粗细程度,一般都以px为单位,color:颜色,与文字的color属性一样,style:样式,solid(实线)、dashed(虚线)、dotted(点划线)、none(不显示).....等等较为常用。border常用样式可以...

    border的属性:

    width:粗细程度,一般都以px为单位,color:颜色,与文字的color属性一样,style:样式,solid(实线)、dashed(虚线)、dotted(点划线)、none(不显示).....等等较为常用。border常用样式可以写在一起,例如:border:1px solid blue.

    padding表示“内容”与“边框”之间的间隙

    形式:padding:padding-top | padding-right | padding-bottom | padding-left 也就是上、右、下、左

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style type="text/css">
    			#div1{width:300px;height:200px;border:1px solid #CDCDCD;padding:100px 60px 50px 20px;color:#A52A2A}
    		</style>
    	</head>
    	<body>
    		<div id="div1">
    			标准盒子模型测试
    		</div>
    	</body>
    </html>

    margin(外边距)的使用:

    理解margin作用:用于控制块与块之间的距离。块元素之间的左右margin。

    结论:当两个块元素紧邻的时候,它们之间的距离为第一个元素的margin-right加上第二个元素的margin-left。

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>margin详解</title>
    		<style type="text/css">
    			div{width:100px;height:50px;border:1px solid blue;background-color: #E66B14;}
    			#div1{margin-right:20px;float:left;}
    			#div2{margin-left:50px;float:left;}
    		</style>
    	</head>
    	<body>
    		<div id="div1">div1</div>
    		<div id="div2">div2</div>
    	</body>
    </html>

    块元素之间的上下margin:在块级元素中当两个div设置了margin-top和margin-bottom时,两个块级元素的实际间隔并不是二者相加,而是二者取其“较大”者。

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style type="text/css">
    		#div1{width:300px;height:200px;border:20px solid gray;}
    		#div2{width:200px;height:100px;border:1px solid blue;background-color:yellow;
    		margin-top:0px;margin-left:0px;}
    		</style>
    	</head>
    	<body>
    		<div id="div1"><div id="div2">字块元素</div></div>
    	</body>
    </html>
    

     

    展开全文
  • border(边框)的两种写法

    千次阅读 2019-01-31 19:20:40
    咱们接着上面的说讲了border的设置多种线条的方法和属性 接下来说 border-style:solid 和 border:1px #eeeee solid 的两者区别 1,border-style 定义和用法 border-style 属性用于设置元素所有边框的样式,或者...

    咱们接着上面的说讲了border的设置多种线条的方法和属性
    接下来说
    border-style:solid 和 border:1px #eeeee solid 的两者区别

    1,border-style

    定义和用法
    border-style 属性用于设置元素所有边框的样式,或者单独地为各边设置边框样式。
    只有当这个值不是 none 时边框才可能出现。

    例子1

    border-style:dotted solid double dashed;
    
    • 上边框是点状
    • 右边框是实线
    • 下边框是双线
    • 左边框是虚线
      例子2
    border-style:dotted solid double;
    
    • 上边框是点状
    • 右边框和左边框是实线
    • 下边框是双线

    因此而看设置border-style的边框是可以设置上下左右的而下一种就不行
    因为他是单纯设置线条的而border-style是设置边框的

    2,border:1px #eeeee solid

    border
    是指设置边框的,他也可以设置上下左右边框 如:(border-top)上边框。
    1px
    是指设置边框的厚度,常用单位如(px,%,等)
    #eeeee
    是指设置边框的颜色,设置方法如(#eeeee,blue 颜色的英文)最好用#eeeee方法,能够准确的知道色号
    solid
    设置设置边框的线条的样式,还可以设置,dotted,dashed,double,groove,inset等

    总结

    border-style可以设置边框的上下左右的线条
    而 border:style 1px #eeeee solid;可以设置单独的边框和上下左右的边框但是不能像border-style就可以设置不同的边框了
    这就是他们之间的差异

    用CSS写border的透明样式

    border: 1px solid transparent;
     
     border-color: transparent;
      
     border-color: rgba(0,0,0,0);
    

    等还有许多种方法,因人而异吧!

    展开全文
  • border详解

    2017-10-17 09:08:01
    1、border边框是外边距和内边距的分界线,在计算元素的宽和高的时候需要border的width计算在内。2、语法 borderborder-style | border-color | border-width;3、样式效果展示:...

    1、border边框是外边距和内边距的分界线,在计算元素的宽和高的时候需要border的width计算在内。

    2、语法
    border:border-style | border-color | border-width;

    这里写图片描述

    3、样式效果展示:

    dotted

    这里写图片描述

    dashed

    这里写图片描述

    solid

    这里写图片描述

    double

    这里写图片描述

    groove

    这里写图片描述

    ridge

    这里写图片描述

    4、边框的4条边也可重点内容以单独设置样式和颜色 如 border-top-color:red;

    展开全文
  • CSS border 属性及用border画各种图形

    千次阅读 2016-08-28 10:58:10
    CSS border 属性 定义和用法 border 简写属性在一个声明设置所有的边框属性。 可以按顺序设置如下属性: border-widthborder-styleborder-color 如果不设置其中的某个值,也不会出问题,比如 border:solid ...

    CSS border 属性


    定义和用法

    border 简写属性在一个声明设置所有的边框属性。

    可以按顺序设置如下属性:

    • border-width
    • border-style
    • border-color

    如果不设置其中的某个值,也不会出问题,比如 border:solid #ff0000; 也是允许的。

    默认值: not specified
    继承性: no
    版本: CSS1
    JavaScript 语法: object.style.border="3px solid blue"

    可能的值

    描述
    border-width 规定边框的宽度。参阅:border-width 中可能的值。
    border-style 规定边框的样式。参阅:border-style 中可能的值。
    border-color 规定边框的颜色。参阅:border-color 中可能的值。
    inherit 规定应该从父元素继承 border 属性的设置。

    CSS border-width 属性


    定义和用法

    border-width 简写属性为元素的所有边框设置宽度,或者单独地为各边边框设置宽度。

    只有当边框样式不是 none 时才起作用。如果边框样式是 none,边框宽度实际上会重置为 0。不允许指定负长度值。


    可能的值

    描述
    thin 定义细的边框。
    medium 默认。定义中等的边框。
    thick 定义粗的边框。
    length 允许您自定义边框的宽度。
    inherit 规定应该从父元素继承边框宽度。


    CSS border-style 属性


    定义和用法

    border-style 属性用于设置元素所有边框的样式,或者单独地为各边设置边框样式。

    只有当这个值不是 none 时边框才可能出现。


    可能的值

    描述
    none 定义无边框。
    hidden 与 "none" 相同。不过应用于表时除外,对于表,hidden 用于解决边框冲突。
    dotted 定义点状边框。在大多数浏览器中呈现为实线。
    dashed 定义虚线。在大多数浏览器中呈现为实线。
    solid 定义实线。
    double 定义双线。双线的宽度等于 border-width 的值。
    groove 定义 3D 凹槽边框。其效果取决于 border-color 的值。
    ridge 定义 3D 垄状边框。其效果取决于 border-color 的值。
    inset 定义 3D inset 边框。其效果取决于 border-color 的值。
    outset 定义 3D outset 边框。其效果取决于 border-color 的值。
    inherit 规定应该从父元素继承边框样式。


    CSS border-color 属性


    定义和用法

    border-color 属性设置四条边框的颜色。此属性可设置 1 到 4 种颜色。

    border-color 属性是一个简写属性,可设置一个元素的所有边框中可见部分的颜色,或者为 4 个边分别设置不同的颜色。


    可能的值

    描述
    color_name 规定颜色值为颜色名称的边框颜色(比如 red)。
    hex_number 规定颜色值为十六进制值的边框颜色(比如 #ff0000)。
    rgb_number 规定颜色值为 rgb 代码的边框颜色(比如 rgb(255,0,0))。
    transparent 默认值。边框颜色为透明。
    inherit 规定应该从父元素继承边框颜色。





    利用css画图形,是个有利有弊的写法,好处是不用画图,且节省了一些流量,坏处是要写长串的css样式,而且有可能流量并没有减少,用与否视情况而定,个人选择。

    下面是我做测试的一些图形,也是参考了一些网站,简单的注解一下和归纳了一下,其中并没涉及到复杂的css画图形。

    其中用了css3.0的一些属性,所以这里声明:请用支持css3.0的浏览器看此文章!

     

    上面这几个相对比较简单,没什么可解释的,看下面源码:

    复制代码
    /*正方形*/
    .Square { width: 100px; height: 100px; background: #669; }
    
    
    /*矩形*/
    .rectangle { width: 200px; height: 100px; background: #669; }
    
    
    /*梯形*/
    .trapezoid { 
    border-bottom: 100px solid #669; 
    border-left: 50px solid transparent; 
    border-right: 50px solid transparent; 
    height: 0; 
    width: 100px; }
    
    
    /*平行四边形*/
    .parallelogram { 
    width: 150px; 
    height: 100px; 
    -webkit-transform: skew(-20deg); 
    -moz-transform: skew(-20deg); 
    -o-transform: skew(-20deg); 
    background: #669;
    margin-left:20px; }
    复制代码

     

    上面这些三角,其实也很常见,主要原理是利用了相邻两个边框的接壤处分配原则,如果没有宽度和高度的话,其实应该是四个三角形接成的矩形,下面是上面图形的源码:

    复制代码
    /*三角形*/
    .triangle-up { 
    width: 0; 
    height: 0; 
    border-left: 50px solid transparent; 
    border-right: 50px solid transparent; 
    border-bottom: 100px solid #669; }
    
    
    /*向下三角*/
    .triangle-down { 
    width: 0; 
    height: 0; 
    border-left: 50px solid transparent; 
    border-right: 50px solid transparent; 
    border-top: 100px solid #669; }
    
    
    /*向左三角*/
    .triangle-left { 
    width: 0; 
    height: 0; 
    border-top: 50px solid transparent; 
    border-right: 100px solid #669; 
    border-bottom: 50px solid transparent; }
    
    
    /*向右三角*/
    .triangle-right { 
    width: 0; 
    height: 0; 
    border-top: 50px solid transparent; 
    border-left: 100px solid #669; 
    border-bottom: 50px solid transparent; }
    
    
    /*上下三角*/
    .triangle-updown { 
    width: 0; 
    height: 0; 
    border-left: 50px solid transparent; 
    border-right: 50px solid transparent; 
    border-bottom: 100px solid #669;
    position:relative;
    margin-bottom:50px}
    
    .triangle-updown:after {
    content:" "; 
    width: 0; 
    height: 0; 
    border-left: 50px solid transparent; 
    border-right: 50px solid transparent; 
    border-top: 100px solid #669;
    position:absolute;
    top:50px;
    left:-50px;}
    
    
    /*左上三角*/
    .triangle-topleft { 
    width: 0; height: 0; 
    border-top: 100px solid #669; 
    border-right: 100px solid transparent; }
    
    
    /*右上三角*/
    .triangle-topright { 
    width: 0; height: 0; 
    border-top: 100px solid #669; 
    border-left: 100px solid transparent; }
    
    
    /*左下三角*/
    .triangle-bottomleft { 
    width: 0; height: 0; 
    border-bottom: 100px solid #669; 
    border-right: 100px solid transparent; }
    
    
    /*右下三角*/
    .triangle-bottomright { 
    width: 0; height: 0; 
    border-bottom: 100px solid #669; 
    border-left: 100px solid transparent; }
    复制代码

     看下面例子,清楚的标明了,四个边的情况,上面的三角形都是利用了这个原理,让不想显示的边框透明transparent:

     
    <div style="border-left:50px solid #060;border-right:50px solid #600;border-bottom:50px solid #f00;border-top:50px solid #00f;width:0px;height:0px;"></div>

     


     其实这个跟上面画三角形的原理很相似,都是利用相邻边框接壤的配原则。另还主要利用了css3.0的圆角属性 border-radius 适当的调整大小会有不同的效果!结合border-width调整,可以得到不同的图形。

    当然适当的调整角度和组合,可以得到更多的图形。

    复制代码
    /*圆形 主要利用了css3.0的圆角属性 border-radius 适当的调整大小会有不同的效果*/
    .circle { 
    width: 100px; 
    height: 100px; 
    background: #669; 
    -moz-border-radius: 50px; 
    -webkit-border-radius: 50px; 
    border-radius: 50px; }
    
    .circle-circle { 
    width: 100px; 
    height: 100px; 
    border:20px solid #669;
    background: #fff; 
    -moz-border-radius: 100px; 
    -webkit-border-radius: 100px; 
    border-radius: 100px; }
    
    .circle-up { 
    width: 100px; 
    height: 0px;
    border:0 solid transparent;
    border-top:100px solid #669;
    border-right:100px solid #669;  
    -moz-border-radius: 100px 100px 0 0; 
    -webkit-border-radius: 100px 100px 0 0; 
    border-radius: 100px 100px 0 0; }
    
    .circle-down { 
    width: 100px; 
    height: 0px;
    border:0 solid transparent;
    border-bottom:100px solid #669;
    border-right:100px solid #669;  
    -moz-border-radius:0 0 100px 100px; 
    -webkit-border-radius:0 0 100px 100px; 
    border-radius:0 0 100px 100px; }
    
    .circle-left { 
    width: 100px; 
    height: 0px;
    border:0 solid transparent;
    border-bottom:100px solid #669;
    border-top:100px solid #669;  
    -moz-border-radius:100px 0 0 100px; 
    -webkit-border-radius:100px 0 0 100px; 
    border-radius:100px 0 0 100px; }
    
    .circle-right { 
    width: 100px; 
    height: 0px;
    border:0 solid transparent;
    border-bottom:100px solid #669;
    border-top:100px solid #669;  
    -moz-border-radius:0 100px 100px 0; 
    -webkit-border-radius:0 100px 100px 0; 
    border-radius:0 100px 100px 0; }
    
    .circle-lefttop { 
    width: 100px; 
    height: 0px;
    border:0 solid transparent;
    border-top:100px solid #669;  
    -moz-border-radius:0 100px 100px 0; 
    -webkit-border-radius:0 100px 100px 0; 
    border-radius:100px 0 0 0; }
    
    .circle-righttop { 
    width: 100px; 
    height: 0px;
    border:0 solid transparent;
    border-top:100px solid #669;  
    -moz-border-radius:0 100px 0 0; 
    -webkit-border-radius:0 100px 0 0; 
    border-radius:0 100px 0 0; }
    
    .circle-rightbottom { 
    width: 100px; 
    height: 0px;
    border:0 solid transparent;
    border-bottom:100px solid #669;  
    -moz-border-radius:0 0 100px 0; 
    -webkit-border-radius:0 0 100px 0; 
    border-radius:0 0 100px 0; }
    
    .circle-leftbottom { 
    width: 100px; 
    height: 0px;
    border:0 solid transparent;
    border-bottom:100px solid #669;  
    -moz-border-radius:0 0 0 100px; 
    -webkit-border-radius:0 0 0 100px; 
    border-radius:0 0 0 100px; }
    复制代码

     

    下面是适当的调整边框宽度和圆角得到的效果:


     

    复制代码
    /*适当的调整边框宽度和圆角得到的效果*/
    .tail-lefttop{
    border: 0 solid transparent; 
    border-top:30px solid #669;
    -moz-border-radius:100px 0 0 0;
    -webkit-border-radius:100px 0 0 0;
    border-radius:100px 0 0 0;
    width:100px;
    height:100px;}
    
    .tail-righttop{
    border: 0 solid transparent; 
    border-top:30px solid #669;
    -moz-border-radius:0 100px 0 0;
    -webkit-border-radius:0 100px 0 0;
    border-radius:0 100px 0 0;
    width:100px;
    height:100px;}
    
    .tail-rightbottom{
    border: 0 solid transparent; 
    border-bottom:30px solid #669;
    -moz-border-radius:0 0 100px 0;
    -webkit-border-radius:0 0 100px 0;
    border-radius:0 0 100px 0;
    width:100px;
    height:100px;;}
    
    .tail-leftbottom{
    border: 0 solid transparent; 
    border-bottom:30px solid #669;
    -moz-border-radius:0 0 0 100px;
    -webkit-border-radius:0 0 0 100px;
    border-radius:0 0 0 100px;
    width:100px;
    height:100px;}
    复制代码

    当然可以通过上面延伸画出更多的效果比如:提示泡

    先看效果:


    复制代码
    .pop{
    width:200px;
    height:100px;
    -moz-border-radius:20px;
    -webkit-border-radius:20px;
    border-radius:20px;
    background:#669;
    margin-top:20px;
    position:relative}
    
    .pop:after{
    content: "";
    border: 0 solid transparent; 
    border-bottom:30px solid #669;
    -moz-border-radius:0 0 0 200px;
    -webkit-border-radius:0 0 0 200px;
    border-radius:0 0 0 200px;
    width:50px;
    height:50px;
    position:relative;
    margin-top:20px;
    -webkit-transform: rotate(-90deg); 
    -moz-transform: rotate(-90deg); 
    -ms-transform
    : rotate(-90deg); 
    -o-transform: rotate(-90deg);
    position:absolute;
    top:50px;}
    复制代码

    上面是css实现代码,基本原理又多了一项,就是利用了:after伪类,小尾巴上面已经介绍过了,这里又利用了一个css3.0的属性transform:rotate旋转了一个角度,

    同时还实现了另外的一个图形--圆角矩形,这是最基本radius的用法,没什么可讲的。当然这里也可以延伸出另一个伪类:before画出第二个小尾巴,当然也不仅限于小尾巴,上面的圆角矩形也可以换成椭圆。

    下面给出实现代码:

    复制代码
    .oval-pop{
    width: 200px; 
    height: 100px; 
    background: #669; 
    -moz-border-radius: 100px / 50px; 
    -webkit-border-radius: 100px / 50px; 
    border-radius: 100px / 50px;
    margin-bottom:50px;
    position:relative}
    
    .oval-pop:after{
    content: "";
    border: 0 solid transparent; 
    border-bottom:30px solid #669;
    -moz-border-radius:0 0 0 200px;
    -webkit-border-radius:0 0 0 200px;
    border-radius:0 0 0 200px;
    width:50px;
    height:50px;
    position:relative;
    margin-top:20px;
    -webkit-transform: rotate(-90deg); 
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg); 
    -o-transform: rotate(-90deg);
    position:absolute;
    top:50px;
    left:20px}
    复制代码

    效果如下:


    同时,也给出了椭圆的实现代码。 其中 border-radius: 100px / 50px; 中有一个“/” 这个符号是很少出现在css样式中的。

    因为,圆角有水平方向也有垂直方向,所以"/"前面代表水平方向,后面代表垂直方向。

    于是我们又多了一个属性,又多了一个发挥的方向。突然间我们发现css画图形其实就是对属性的组合创造。多试几次,相信每个人都很好的掌握这个技能!

    下面再看一个属性,其实是对上面讲过的属性的一个扩展。

    可以说是画圆的扩展也可以说是对圆角矩形的扩展---胶囊形:

     

     下面是实现代码,基本属性上面我们都利用过,只是稍做调整:

    复制代码
    .capsule{
    border: 0 solid transparent; 
    -moz-border-radius:100px;
    -webkit-border-radius:100px;
    border-radius:100px;
    width:200px;
    height:70px;
    background:#669;}
    
    .v-capsule{
    border: 0 solid transparent; 
    -moz-border-radius:100px;
    -webkit-border-radius:100px;
    border-radius:100px;
    width:80px;
    height:200px;
    background:#669}
    
    .up-capsule{
    border: 0 solid transparent; 
    -moz-border-radius:100px;
    -webkit-border-radius:100px;
    border-radius:100px 100px 0 0;
    width:70px;
    height:120px;
    background:#669;}
    
    .r45-capsule{
    border: 0 solid transparent; 
    -moz-border-radius:100px;
    -webkit-border-radius:100px;
    border-radius:100px 100px 0 0;
    width:70px;
    height:120px;
    background:#669;
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    margin-left:20px;}
    
    .l45-capsule{
    border: 0 solid transparent; 
    -moz-border-radius:100px;
    -webkit-border-radius:100px;
    border-radius:100px 100px 0 0;
    width:70px;
    height:120px;
    background:#669;
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    margin-left:20px;}
    
    .lr45-capsule{
    width:160px;
    height:130px;
    position:relative}
    
    .lr45-capsule:before{
    content:" ";
    border: 0 solid transparent; 
    -moz-border-radius:100px;
    -webkit-border-radius:100px;
    border-radius:100px 100px 0 0;
    width:80px;
    height:120px;
    background:#669;
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    position:absolute;
    left:20px;}
    
    .lr45-capsule:after{
    content:" ";
    border: 0 solid transparent; 
    -moz-border-radius:100px;
    -webkit-border-radius:100px;
    border-radius:100px 100px 0 0;
    width:80px;
    height:120px;
    background:#669;
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    position:absolute;
    left:160px;
    top:00px;}
    复制代码


    细观察一下最后两个图形如果合在一起好像能组成一个心形,其实就是一个心形:


    复制代码
    .heart{
    width:160px;
    height:200px;
    position:relative}
    
    .heart:before{
    content:" ";
    border: 0 solid transparent; 
    -moz-border-radius:100px;
    -webkit-border-radius:100px;
    border-radius:100px 100px 0 0;
    width:80px;
    height:120px;
    background:#669;
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    position:absolute;
    left:20px;}
    
    .heart:after{
    content:" ";
    border: 0 solid transparent; 
    -moz-border-radius:100px;
    -webkit-border-radius:100px;
    border-radius:100px 100px 0 0;
    width:80px;
    height:120px;
    background:#669;
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    position:absolute;
    left:48px;
    top:0px;}
    复制代码

     上面讲的只是对css画图形的初步认识,基本上所有的实现都是对边框的角度的调整及组合。




    转自w3school,http://www.cnblogs.com/pigtail/archive/2013/02/17/2914119.html

    https://www.douban.com/note/292683524/

    http://www.zcool.com.cn/article/ZMzY2NTY%3D.html

    展开全文
  • border的几个用法。

    千次阅读 2018-07-24 17:52:12
    1.三等分 2.传统的十字添加 3.定义块状元素的高度,边界 4.三角形 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"... p
  • border.css

    2019-04-23 12:08:00
    .border, .border-top, .border-right, .border-bottom, .border-left, .border-topbottom, .border-rightleft, .border-topleft, .border-rightbottom, .border-topright, .border-bottomleft { ...
  • 】把border设为“0”像素虽然在页面上看不见,但按border默认值理解,浏览器依然对border-width/border-color进行了渲染,即已经占用了内存值。 【border:none;】把border设为“none”即没有,浏览器解析“none”时...
  • .border, .border-top, .border-right, .border-bottom, .border-left, .border-topbottom, .border-rightleft, .border-topleft, .border-rightbottom, .border-topright, .border-bottomleft { ...
  • 由于我们工作室只能通过Socks5代理连接上外网,所以每个软件都需要设置代理。更为繁琐的是并不是每一个软件都支持Socks5代理,比如NewzCrawler、Opera等等就是。这给我的工作带来了很大的不便。...
  • CSS 边框 border属性

    千次阅读 2018-02-16 22:12:27
    边框在CSS1中,就支持为元素添加边框,并可以设置边框的样式、颜色、及粗细。不过,当时的边框太过单一,只支持简单的线条...线条边框使用 border属性定义,图像边框使用 border-image 属性来定义,圆角边框使用 bo...
  • border 属性样式

    千次阅读 2018-09-07 20:44:14
    border: solid 1px; 实线边框 2.border: dotted 1px; 点划线边框 3.border: dashed 1px; 虚线边框 4.border: double 5px; 双线边框 border: none border:hidden; 都是定义无边框,但是对于表来...
  • 先来看一段样式,在wxss中page{ background-color: cadetblue; background-image: url(../../../image/weixin_logo.png); background-repeat:repeat-x; background-position-y: top; }123456注意,page前面并...
  • CSS Border属性solid(实线)使用介绍

    千次阅读 2017-09-02 12:52:46
    Border(画边框),它是CSS的一个属性,用它可以给能确定范围的HTML标记(如TD、DIV等等)画边框,可以给文本加边框,给导航菜单加分隔线,下面与大家分享个实例,感兴趣的朋友可以了解下   制作过网页的人都有为...
  • HTML <table> border 属性

    千次阅读 2018-12-12 16:02:27
    所有主流浏览器都支持 border 属性。 定义和用法 border 属性规定表格单元周围是否显示边框。 值 "1" 指示应该显示边框,且表格不用于布局目的。 HTML 4.01 与 HTML5之间的差异 在 HTML5 中,border ...
  • HTML关于border属性的一点小领悟

    千次阅读 2018-06-12 17:55:19
    我们为这里的li设置了一个border,然后我们现在想改变border-bottom的颜色。通常我们会有两种做法:左侧截图中的方法能够改变border-bottom的颜色,而右侧和下侧截图这种两种方式border-bottom的颜色将不会发生变化...
  • css border属性简写

    千次阅读 2014-08-05 15:27:38
    CSS的border属性的定义:  Value: [ || || ] | inherit  Initial: see individual properties  Applies to: all elements  Inherited: no  Percentages: N/A  Media: visual  Computed value: see ...
  • CSS+DIV之强化border属性

    千次阅读 2009-07-02 09:54:00
    今天在百度搜索引擎发现了“CSS+DIV”关键词排名从第一页跌到第四页,感觉到蛮可惜的。...求教了一些CSS+DIV高手,他们给我的答案:从最简单的CSS属性学起。将学习笔记整理出来,与更多的CSS+DIV爱好者共同成长。
  • 1:属性概括:CSS中border属性的使用,设置元素有边框,并设置边框的属性,包括边界大小,类型,颜色; 2:属性使用细说: 2.1:第一种设置border的方式,元素是矩形的,有四条边,而这种方式的设置后,会样式给四...
  • <table border="100px" bordercolor="green"> ID 标题 描述 价格 数量 类型 地址 图片 ``` 在网页里面只有内容 没有...
  • 边框border属性总结

    2015-10-21 16:38:11
    留着这些属性自己以后方便看: 其中border-style的值是: html> p.dotted {border-style: dotted} p.dashed {border-style: dashed} p.solid {border-style: solid} p.double {border-style: ...
  • 框结构模型图一: 元素框的最内部分是实际的内容,直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距,外边距默认是透明的,...padding 属性接受长度值或百分比值,但不允
  • CSS的border属性的值的书写顺序

    千次阅读 2014-03-28 13:30:01
    CSS的border属性的定义: Value:  [ || || ] | inherit Initial:  see individual properties Applies to:  all elements Inherited:  no Percentages:  N/A ...
  • web border属性

    2017-02-08 10:41:06
    画个控件的边什么的 border: 1px solid black; 第一个参数就是多宽,第二个是样式,第三个是颜色 也可以border-top: 100px solid red; 单个定义
  • WPF border属性

    千次阅读 2013-11-25 15:34:33
    Border 是一个装饰的控件,此控件绘制一个边框、一个背景,在 Border 中只能有一个 子控件,但它的子控件是可以包含多个子控件的 Border 的几个生要的属性: Background:此属性设置 背景颜色 BorderBrush:此属性...
  • 我们先来认识一下“Border”(画边框),它是CSS的一个属性,用它可以给能确定范围的HTML标记(如TD、DIV等等)画边框,它可以定义边框线的类型、宽度和颜色,利用这个特性,可以制作一些特殊效果。下面把通过实例来...
  • css用border制作三角形 在css中,我们可以用边框制作一个三角形 代码如下: &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-...
  • CSS中元素的边框border属性

    千次阅读 2013-01-08 16:53:09
    元素的边框一般用来分隔页面的各个部分,在CSS中,边框属性可以分为以下几个属性,包括边框样式(border-style),边框宽度(border-width), 边框颜色(border-color)以及边框综合属性(border)等。  顶部边框样式...

空空如也

1 2 3 4 5 ... 20
收藏数 794,027
精华内容 317,610
关键字:

border