python去掉绘图边框 python去除图片阴影

转载

laokugonggao 2024-07-25 10:26:28

文章标签 python去掉绘图边框 python javascript ViewUI bc 文章分类 Python 后端开发

了解了html5中html部分的提升，接下来，看一下CSS3吧！

CSS3的现状

浏览器支持程度差，需要添加私有前缀

通过caniuse可查询CSS3各特性的支持程度，一般兼容性处理的常见方法是为属性添加私有前缀，如不能解决，应避免使用，无需刻意去处理CSS3的兼容性问题。

<!DOCTYPE html>
	<html>
	<head lang="en">
	    <meta charset="UTF-8">
	    <title></title>
	    <style>
	        /*box变成半径为50px的圆*/
	        .box{
	            width: 100px;
	            height: 100px;
	            /*加上私有前缀*/
	            border-radius: 50px;
	            /*-webkit- 谷歌*/
	            -webkit-border-radius: 50px;
	            /*-moz- 火狐*/
	            -moz-border-radius: 50px;
	            /*-o- 欧鹏*/
	            -o-border-radius:50px;
	            /*-ms- IE*/
	            -ms-border-radius:50px;

	            /*在学习开发当中不需要考虑兼容性,如果是开发的pc端页面最好是加上私有前缀*/
	            /*如果在移动端开发,只需要考虑兼容webkit浏览器,主流浏览器内容都是webkit*/
	        }
	    </style>
	</head>
	<body>
	   <div class="box"></div>
	</body>
	</html>

移动端支持优于PC端
不断改进中
应用相对广泛

手册

[] 表示全部可选项
|| 表示或者
| 表示多选一
？表示0个或者1个

表示0个或者多个

{} 表示范围

选择器

CSS3选择器与jQuery中所提供的绝大部分选择器兼容。

属性选择器

通过属性来选择元素，具体有以下5种形式：

E[attr] 表示存在attr属性即可;
E[attr=val] 表示属性值完全等于val;
E[attr*=val] 表示的属性值里包含val字符并且在"任意"位置;
E[attr^=val] 表示的属性值里包含val字符并且在"开始"位置;
E[attr$=val] 表示的属性值里包含val字符并且在"结束"位置;
也要考虑到权重的问题。

/*[attribute] 只要标签里面有这个属性就能选中  $('[class]')*/
[class]{
    color: red;
}
/*[attribute=value] 有这个属性并且它的值完全等于value  $('[class=value]')*/
[class='abc']{
    color: green;
}
/*[attribute!=value] 有这个属性并且值不等于value $('[class!="abc"]') */
/*在css当中属性选择器是没有非*/
/* [class!='abc']{
    color:blue;
}*/
/*[attribute^=value] 有这个属性并且属性值以value开头 $('[class^="abc"]')*/
[class^='abc']{
    color: yellow;
}
/*[attribute$=value] 有这个属性并且这个属性的值要以value结尾  $('[class$="abc"]')*/
[class$='abc']{
    color: pink;
}
/*[attribute*=value] 有这个选择器并且这个值包含value  $('[class*="abcd"]')*/
[class*='abcd']{
    color: black;
}

复制一下试试看吧！

伪类选择器

除了:link、:active、:visited、:hover，CSS3又新增了其它的伪类选择器。

以某元素相对于其父元素或兄弟元素的位置来获取无素的结构伪类。
先通过li来确定父元素，去找这个父元素的当中的子元素，再找到第几个子元素，判断是不是这个类型，如果不是则选择器没用，如果是则可以设置样式。

E:first-child第一个子元素
E:last-child最后一个子元素
E:nth-child(n) 第n个子元素，计算方法是E元素的全部兄弟元素
E:nth-last-child(n) 同E:nth-child(n) 相似，只是倒着计算
E:empty 选中没有任何子节点的E元素（使用不是非常广泛）
E:nth-child(even){};偶数行设置样式。
E:nth-child(odd){}:奇数行设置样式。

/*empty本身就是空的意思 span:empty这是一个span标签并内容为空
		则会被选中
	*/
	span:empty {
		display: none;
	}

注意：n遵循线性变化，其取值0、1、2、3、4、... 但是当n<=0时，选取无效;n可以是多种形式：nth-child(2n)、nth-child(2n+1)、nth-child(-1n+5)等; n一定要放在表达式的前面。

目标伪类

E:target 结合锚点进行使用，处于当前锚点的元素会被选中;

/*目标伪类选择器，它选中的当前锚点*/
	h2:target {
		color: green;
	}

E:not 排除包含某个条件选择器

伪元素选择器

E::first-letter文本的第一个字母或字（如中文、日文、韩文等）;

/*注意要设置首字母首字必须是块级元素*/
span{
	display: block;
}
span::first-letter{
	color: red;
	font-size: 50px;
}
li::first-letter{
	color: red;
}

E::first-line 文本第一行;

p::first-line{
	color: green;
}

E::before、E::after是一个行内元素，需要转换成块元素
E:after、E:before 在旧版本里是伪类，在新版本里是伪元素，新版本下E:after、E:before会被自动识别为E::after、E::before，按伪元素来对待，这样做的目的是用来做兼容处理。
E::selection 可改变选中文本的样式;

p::selection{
	background: pink;
	color: blue;
	/*不能设置字体大小*/
	font-size: 40px;
}

注意：":" 与 "::" 区别在于区分伪类和伪元素。伪类的效果可以通过添加一个实际的类来达到，而伪元素的效果则需要通过添加一个实际的元素才能达到。

颜色

新增了RGBA、HSLA模式，其中的A 表示透明度通道，即可以设置颜色值的透明度，相较opacity，它们不具有继承性，即不会影响子元素的透明度。

Red、Green、Blue、Alpha即RGBA
Hue、Saturation、Lightness、Alpha即HSLA
R、G、B 取值范围0~255
H 色调取值范围0~360，0/360表示红色、120表示绿色、240表示蓝色
S 饱和度取值范围0%~100%
L 亮度取值范围0%~100%
A 透明度取值范围0~1
透明度比较补充：

opacity只能针对整个盒子设置透明度，子盒子及内容会继承父盒子的透明度;
transparent 不可调节透明度，始终完全透明;
RGBA、HSLA可应用于所有使用颜色的地方。

文本

text-shadow，可分别设置偏移量、模糊度、颜色（可设透明度）。

水平偏移量,正值向右,负值向左,单位px;
垂直偏移量,正值向下,负值向上,单位px;
模糊度是不能为负值。

/*第二个li的文字有阴影  往左和上偏移 颜色是红*/
li:nth-child(2){
	text-shadow: -3px -3px 5px red;
}
/*最后一个li设置 两个阴影*/
/*以英文逗号分隔*/
li:last-child{
	text-shadow: 6px 6px 5px #000,-3px -3px 5px red,-9px -9px 5px green;
}

边框

百分比宽度的时候怎么防止溢出？box-sizing: border-box;

边框圆角(border-radius)

python去掉绘图边框 python去除图片阴影_ViewUI

可分别设置长、短半径，以"/"进行分隔，遵循"1，2，3，4"规则，"/"前面的1~4个用来设置横轴半径(分别对应横轴1、2、3、4位置 ),"/"后面1~4个参数用来设置纵轴半径(分别对应纵轴1、2、3、4位置)。

//正圆形
border-radius: 50%;
border-radius: 100px;
border-radius: 100px 100px;
border-radius: 100px 100px 100px 100px;
border-radius: 100px 100px 100px 100px / 100px 100px 100px 100px;

边框阴影(box-shadow)

水平偏移量,正值向右,负值向左;
垂直偏移量,正值向下,负值向上;
模糊度是不能为负值;
inset可以设置内阴影;

/*
1.x轴偏移
2.y轴偏移
3.阴影的模糊度
4.阴影的延伸(可选)
5.阴影的颜色
*/
box-shadow: 3px 3px 5px 10px #ccc;

边框图片(border-image)

round和repeat之间的区别

round 会自动调整尺寸，完整显示边框图片。
repeat 单纯平铺多余部分，会被"裁切"而不能完整显示。

更改裁切尺寸:border-image-slice

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>CSS3边框</title>
	<style>
		body {
			margin: 0;
			padding: 0;
			background-color: #F7F7F7;
		}

		ul {
			width: 960px;
			margin: 40px auto;
			list-style: none;
			background-color: #FFF;
		}

		li {
			padding: 15px;
		}

		li:nth-child(2) {
			width: 300px;
			height: 150px;

			/*
			1.边框图片资源的路径
			2.切割的尺寸
			3.边框的宽度
			4.边的平铺方式
			*/

			/*1.边框图片资源的路径*/
			border-image-source: url("./images/border.png");
			/*2.切割的尺寸*/
			/* 切了4刀  上  右  下  左 单位是px但是默认都是不带参数*/
			/**/
			border-image-slice:38 38 27 27;
			/*3.边框的宽度*/
			border-image-width: 20px;
			/*4.边的平铺方式*/
			/* stretch 拉伸  把切割的九宫格当中的边对应的图标拉伸 */
			/* round 环绕  会按照整数的图标来排列  不会损坏图标*/
			/* repeat 平铺  从边的中线开始平铺 不会保证图标的完整性*/
			border-image-repeat: round;
		}
		
	</style>
</head>
<body>
	<ul>
		<li>
			<div class="border-image">
				<img src="./images/border.png" alt="">
			</div>
		</li>
		<li>
			<div class="border-image"></div>
		</li>
		<li>
			<div class="border-image"></div>
		</li>
	</ul>
</body>
</html>