【css中元素border属性的构成以及配合属性值transparent可得到一些特殊形状1.0】的更多相关文章

css中元素border属性的构成以及配合属性值transparent可得到一些特殊形状1.0

css中我们经常使用到元素的border属性和属性值transparent,可能好多人还不太了解border的构成以及配合transparent的一些效果: 1.border的构成如下所示:   html部分: <body> <h6>边框的构成</h6> <div class="bodrShape1"></div> <div class="bodrShape2"></div> <…

原来css中的border还可以这样玩

原来css中的border还可以这样玩 前面的话: 在看这篇文章之前你可能会觉得border只是简单的绘制边框,看了这篇文章,我相信你也会跟我一样说一句"我靠,原来css中的border还可以这样玩".这篇文章主要是很早以前看了别人用纯CSS绘制三角形后自己的一些思路的整理,文中会介绍几种小图标的效果. 用css中的border绘制鸡蛋形状: 是的你没看错,这里是要做绘制一个类似于鸡蛋的效果. 思路:我们先用div绘制一个正方形,然后利用设置border-radius: 50%;,这样…

css中的border还可以这样玩

在看这篇文章之前你可能会觉得border只是简单的绘制边框,看了这篇文章,我相信你也会跟我一样说一句"我靠,原来css中的border还可以这样玩".这篇文章主要是很早以前看了别人用纯CSS绘制三角形后自己的一些思路的整理,文中会介绍几种小图标的效果. 用css中的border绘制鸡蛋形状: 是的你没看错,这里是要做绘制一个类似于鸡蛋的效果. 思路:我们先用div绘制一个正方形,然后利用设置border-radius: 50%;,这样我们就可以得到一个圆形的效果,代码如下: html代…

CSS中隐藏内容的3种方法及属性值

CSS中隐藏内容的3种方法及属性值 (2011-02-11 13:33:59)   在制作网页时,隐藏内容也是一种比较常用的手法,它的作用一般有:隐藏文本/图片.隐藏链接.隐藏超出范围的内容.隐藏弹出层.隐藏滚动条.清除错位和浮动等等. 使用CSS即可使以上提到的内容隐藏起来,几种隐藏内容的方法: 1.使用display:none来隐藏所有内容 display:none可以让网页中所有内容不显示,如代码.文字.链接.图片.div层,是推荐的内容隐藏方式. <div style="displ…

css中的大小、定位、轮廓相关属性

css中的大小.定位.轮廓相关属性 1.通过height.width属性控制组件大小 height:高度,可以设置任何有效的距离值: width:宽度,可以设置任何有效的属性值: max-height.min-height用于设置最大最小的高度,当高度大于最大高度时将会被自动转换成最大 高度,同理最小高度也是一样: max-width.min-width用于设置最大最小的宽度,和高度一样,只要超过了规定值,就会自动被转 换成规定值: 2.css3新增的box-sizing属性 该属性可以设置3个…

css中的背景、边框、补丁相关属性

css中的背景.边框.补丁相关属性 关于背景涉及到背景颜色与背景图片 背景颜色background-color即可设定: 背景图片background-image即可设定: 但是背景图片还涉及到其他的一些内容: background-attachment:用于设定背景图片是滚动的还是固定的,可以设定为scroll和fixed两种: background-position:用于设定背景图片的位置,可以设定为实际值,也可设定为百分比: background-repeat用于设定背景图片是否平铺,可以…

关于css中的border

我一直以为css中的border是正方形的 像这样 因为我平时用的时候都是 border:1px solid #000,都是同一个颜色所以看不出来 当我给每一个边分别设置颜色的时候才发现 他们是以梯形分布的,border中的top right bottom left 是以梯形显示的,如果此时你给div设置宽高为0的话 他们就变成三角形了…

深入理解之css中的border属性

1. border-width:不支持不百分比 1)受本身的使用场景决定. 例子:左边为手机,右边为显示器,但是他们边框的宽度是差不多的,不会因为设备大就让边框宽度变大. 2. border-width:还支持关键字(thin=1px  medium=3px  thick=5px) 但是border中最常用的却是thin 为什么他的默认属性为3px? border-style:double的默认属性为三像素. 3.border-style:double 1)border-style: solid…

css中元素的auto属性值是什么意思，比如margin:0 auto表示什么？

auto 你可以理解为一种 自动/自适应 的概念 比如 现在项目需要一个宽度为960px的整体布局居中 根据用户浏览器大小不同你将需要使用margin:0 auto;来实现. 无论用户浏览器宽度为多少.960px的定位宽度永远居中. css中的auto是自动适应的意思,而在css中auto往往都是默认值. 正如margin:0 auto,意思就是上下边距为0,左右边距为auto,就是自动适应.但是,如果要使用他的话,就必须给标签配上指定的宽度,如下:<div class="center&q…

CSS中设置border:none和border:0的区别

在我们设置CSS的时候,对标签元素不设置边框属性或者取消边框属性一般设置为:border:none;或border:0;两种方法均可. border:none;与border:0;的区别体现有两点:一是理论上的性能差异:二是浏览器兼容性的差异. 1.性能差异 [border:0;]把border设为"0"像素虽然在页面上看不见,但按border默认值理解,浏览器依然对border-width/border-color进行了渲染,即已经占用了内存值.[border:none;]把bord…