border-style,borderstyledotted

http://www.itjxue.com  2023-01-04 16:31  来源:未知  点击次数: 

css的知识

很好理解啊,你自己已经给出了答案了,border-color指的是边框的颜色,border-width指的是边框的宽度,border-style指的是边框的样式,一般来说设置边框的

html

head

style type="text/css"

/*设置边框样式为实线,黑色,边框粗为1px */

/* 设置上下边框的颜色为红色,左右边框绿色*/

/*其他以此类推,多看下手册,自己手动敲下就明白了!*/

.test{border:1px solid black;

border-color:red green;}

/style

/head

div class="test"测试/div

/html

css---border的注意点

div{widht:100px;height:100pxborder-width:2px;}

上面这样的设置 div 在页面中实际站位是 104px,如果不注意很容易造成页面错乱。这是因为我们大部分情况下盒模型使用的是 W3C 标准的’box-sizing: content-box;’,它在页面中实际宽度 =?width+border( 该公式仅针对上面例子)。

border-image-source背景图片源

border-image-slice需要展示出来图片的尺寸,如果这个量等于图片的尺寸就都相当于整个图片展示出来

border-image-width图片边框的宽度。

border-image-outset边框图像区域超出边框的量。

border-image-repeat图片的填充形式

这个属性的兼容性不是很好,所以在正常的前端开发工作中很难用到,但是在不考虑兼容性的情况下,它无疑的一个很强大的属性,因为它可以自定义漂亮的边框,而不在是单调的线条。

这个属性使用并不太难,不过其中的border-image-slice属性在使用的时候有一个小技巧,就是当想要其中?image?不失真即不拉伸,slice?要和?width?一样。

例如:

.demo{border-width:20px;border-image-slice:20;}

.demo2{

? ? width: 100px;

? ? height: 100px;

? ? background: #ccc;

? ? border-width: 20px;

? ? border-style: solid;

? ? border-image-source: url(./../img/border-image.jpg);

? ? border-image-slice:20;

? ? border-image-outset:22px;

? ? border-image-repeat: repeat;

}

order-image?使用时候一定要设定?border-style?虽然这个属性没什么用,但是如果不设定它?border-image?就不生效。

border-image-slice?如果设定数值当?px?用时候直接写数字就可以 如果加上?px?反而会不生效。

border-width?用来设定边框的宽度,它决定图片边框展示的厚度(即围绕宽度)。

不要让?border-radius?的 % 值大于 50,因为如果两个相邻的半径和超过了对应的盒子的边的长度,那么浏览器要重新计算以保证它们不重合。虽然表面上看没有问题但是这样会对性能有影响。

如果用?rem、em?单位在移动端用border-radius?画圆,在部分机型里面是椭圆的问题,可以通过?50%?来解决 ,或者使用?px?配合缩放?scale?来实现?rem?单位的效果。

在内联元素span这类标签使用这个属性的时候同样有效但是记得不要使用%这样会导致一些span?标签的圆角不一样因为?%?是参考长和宽计算的。

border-radius?圆角并不会隐藏标签内部元素的内容,如果有内容溢出的情况记得增加overflow:hidden;

任何元素都可以使用这个属性,包括视频、音频标签等。

一般情况下不推荐?border-top-left-radius?这类的写法除非是需要在某种交互过程中需要改变其中一个的圆角值而其它的保持不变。因为这类的标签会影响浏览器渲染的性能。

使用这个属性可以让页面更有立体感,给元素添加一个阴影,使得元素看起来是悬浮在原来的位置,下面就看看它的用法吧。

效果如下图

它主要用来告诉浏览器怎么计算元素的展示宽高的。

推荐大家设置?box-sizing?为border-box?这样方便我们写样式不必在去减去?padding?也不会造成 IE 和 Chorme 这类浏览器展示不同的 bug 。如果不设置?box-sizing?不同浏览器会有不同的计算方式。

在VB窗体属性中,BorderStyle属性有0~5,这些功能分别都是什么?

VB窗体BorderStyle属性设置值如下: ?

属性设置值0:None(无边界框架)

属性设置值1:FixedSingle(窗口大小固定不变的单线框架)

属性设置值2:Sizable(窗口大小可变的标准双线框架)

属性设置值3:FixedDialog(窗口大小固定的对话框窗体)

属性设置值4:FixedToolWindow(窗口大小固定的工具箱窗体)

属性设置值5:Sizable ToolWindow(窗口大小可变的工具箱窗体)

扩展资料

VB窗体其他属性及说明

1、Appearance,外观效果,取值为:

0:平面

1:3D(立体)

2、AutoRedraw,是否自动刷新或重画窗体上所有图形[获得或设置从绘图(graphics)方法到一个持久性位图的输出,取值为:

True

False

BackColor 背景颜色,可从弹出的调色板选择。

3、DrawStyle,设定绘图相关方法使用的直线样式,有7 种可选:

0:实线,此为默认值

1:虚线

2:点线

3:单点划线

4:双点划线

5:无线

6:内部实线

参考资料来源:百度百科-VB窗体

(责任编辑:IT教学网)

更多

相关浏览下载文章

推荐浏览下载文章