border-back,borderbackground
CSS border透明
把border-right和border-top的边框颜色改成你的父级标签的背景色就行了,如果是放在body里就改成你的网页的背景色;(补充:背景是图片的话那就只能用填充了,也就是给上和右一个4px的填充,把位置空出来,但不知道你留那个位置干嘛)
css中font、background、border样式的简写
font样式简写:
font:[font-style] [font-weight] [font-size] / [font-height] [font-family]
background样式简写:
background:[background-color] [background-image] [background-repeat] [background-position] / [background-size]
border样式简写:
border:[border-width] [border-style] [border-color]
其中font和background的样式属性顺序不可换,且"/"不可忽略,border的样式属性的顺序可任意。
CSS属性含义。网页设计问题
word-spacing 单词或汉字间的间隔距离
letter-spacing 字母间的间隔距离
background-repeat 背景图是否重复显示,即是否填满整个空白区域。
backround-attachment 背景图像是随对象内容滚动还是固定的 值一般是fixed,
margin-top 所属控件与外部控件的上边距是多少
boder-right-style 右边框的样式,是点画线呢还是实现呢,还是双线条呢。等等。
table{margin:20px 10 px} 让页面的所有table 上边距是20px,右边距是10px。
text-indent 针对文字的段落开头的缩进。即是否留出空白。
font-variant 设置文本中的字母,normal 为正常值显示。 small-caps显示为小点的大写字母
background-repeat 上边以提到。
border-bottom-width 底部边框的宽度。
visibility 是否可见。
padding-left 元素与所述控件的左空白。
list-style 设置列表项目相关内容。比如可取值有 list-style-type : disc | circle | square
list-style-image 这个其实与background-image差不多。这里只是图片引用到list样式上来。
css3新增的属性有哪些
css3新属性:
一、RGBA和透明度
RGBA是RGB色彩模型的一个扩展。在本质上看也是为设置的元素增加了一个 alpha 通道,即除了红绿蓝三种颜色外还增加一个代表透明度的通道,其中 RGB 值分别表示红色、绿色、蓝色,而 alpha 取值则为 0 到 1 (小数位一位)。
二、background属性
background-image:设置元素的背景图像。
background-origin:规定背景图片的定位区域。
background-size :规定背景图片的尺寸。
background-repeat:设置是否及如何重复背景图像。
三、word-wrap属性
word-wrap 属性允许长单词或 URL 地址换行到下一行。
注:所有主流浏览器都支持 word-wrap 属性。
基础语法:
word-wrap: normal|break-word;
四、text-shadow属性
text-shadow 属性:向文本设置阴影。
text-shadow基础语法:
text-shadow: 5px 5px 5px #FF0000;
参数分别表示:水平阴影,垂直阴影,模糊距离,阴影颜色;
五、font-face属性
font-face属性:定义自己的字体
在新的 @font-face 规则中,您必须首先定义字体的名称(比如 myFirstFont),然后指向该字体文件。
六、border-radius属性
border-radius 属性:是一个简写属性,用于设置四个 border-*-radius 属性。
基础语法:
border-radius: 1-4 length|% / 1-4 length|%;
注:该属性允许您为元素添加圆角边框!
七、border-image属性
border-image:将图片规定为包围 div 元素的边框
border-image基础语法:
border-image: url(border.png) 30 30 round
八、box-shadow属性
box-shadow属性:向框添加一个或多个阴影。(盒阴影)
box-shadow基础语法:
box-shadow: 10px 10px 5px #888888
九、媒体查询
媒体查询定义两套css,当浏览器的尺寸变化时会采用不同的属性。
如何设置span和div的边框和背景色
1、设置边框和背景色需要使用css的border和background属性。具体的用法是,首先打开html编辑器,在空白的html文件中,新建一个div和span标签,并在上方head里设置style标签:
2、接着在style标签中设置span和div的标签,首先给它们宽度和高度,接着给他们设置不同颜色,最后设置边框border,border属性的3个值分别代表边框宽度,边框样式,边框颜色:
3、其中边框样式有点线,虚线,双线,实线等不同类别,具体样式在下图中均已列出,可根据自己的喜好选择,这里设置span的边框样式为dashed,div的为solid:
4、最后打开浏览器,就可以看到设置好的效果了。以上就是设置span和div的边框和背景色的方法介绍:
环形 css3 点击border会有什么效果
CSS3中有关于border的属性我们一起学习完了圆角border-radius和边框颜色border-color,只剩下最后一个边框图片border-image。今天我们就一起来学习这个border-image的属性。学习完这个border-image以后,大家一定会很兴奋,因为他改变我了们以往设置border的效果,以前我们border只能简单的设置一些纯色或几种简单的线型(如solid,dotted,double,dashed等)那么我们以后就可以通过border-image这个属性改变以前的一切,可以给边框设置不同的图片效果。
简单的来介绍一下border-image的参数,让大家在脑海中有下初步的概念
1、none:是border-image的默认值,如果取值为none时,表示边框无背景图片;
2、image:设置border-image的背景图片,这个跟background-image一样,使用绝对或相对的url地址,来指定背景图片;
3、number:number是一个数值,用来设置边框的宽度,其单位是px,其实就像border-width一样取值,可以使用1~4个值,其具体表示四个方位的值,大家可以参考border-width的设置方式;
4、percntage:percntage也是用来设置边框的宽度,跟number不同之处是,其使用的是百分比值来设置边框宽度;
5、stretch,repeat,round:他们是用来设置边框背景图片的铺放方式,类似于background-position,其中stretch是拉伸,repeat是重复,round是平铺,stretch为默认值。
大家看到上面的参数介绍后一定会想起background-image这个属性。是的,这两者之间确实有一些类似之处,其中包括对图片的引用和排列方式都是一样的原理。为了更好的理解,先暂时把border-image在语法的表达形式进行属性的分解来阐述(实际应用中是不能分解的),这样就可以把border-image分解为:
1、引入图片:border-image-source;
2、切割引入的图片:border-image-slice;:
3、边框的宽度:border-image-width;
4、图片的排列方式:border-image-repeat。
下面就详细的来介绍上面的四个属性的使用方法和其各自的特性,从而更好的深化border-image的相关知识点。
著作权归作者所有。
商业转载请联系作者获得授权,非商业转载请注明出处。
原文: ? w3cplus.com