描边 | 易学教程

html的input和描边

阅读更多关于 html的input和描边

用背景图引入图片background：url（img/xx）no-repeat center （不要重复居中）还要给个高度才能显示出来图片多高就给多高。但凡图片里面有东西，都用背景图来做描边例如：border-redius：50%；border：white 1px solid ；box-sizing：border-box （solid表示实线）描边会导致尺寸变大需要添加box-sizing：border-box 表达 input标签 input 有宽高需要自己设置，可以加padding placeholder占位符 value值表单里面最重要 type类型默认文字 text和password 例如 border后面颜色粗细实线还是虚线 text-align：center 可以让文字图片都居中来源： CSDN 作者： Theworld007 链接： https://blog.csdn.net/Theworld007/article/details/102796643

PPT小技巧：PPT中怎么给文字添加描边效果

阅读更多关于 PPT小技巧：PPT中怎么给文字添加描边效果

很多时候在色彩丰富的PPT中由于背景颜色的关系，文字往往并不能清晰呈现，这个时候我们需要给PPT中的文字添加描边效果，这样突出需要显示的文字了。想必大家一般给文字添加描边效果都是在PS中进行操作的吧，今天给大家安利一个PPT小技巧，在 PPT中给文字添加描边效果。第一步：打开PPT文件新建一个空白页面。第二步：插入文本框，并在上方输入“1,2,3”。第三步：点击绘图工具。第四步：找到导航栏上的“文本轮廓”并点击。第五步：调整文字的描边颜色。第六步：调整文字的描边粗细。好了，这样一来PPT文字描边效果就展现出来啦。大家可以相对比较一下在PS中进行的处理看看哪个方法比较好。来源： 51CTO 作者： nao73404 链接： https://blog.51cto.com/14259564/2454509

svg描边动画原理

阅读更多关于 svg描边动画原理

1. svg基本图形有7种矩形 <rect> 圆形 <circle> 椭圆 <ellipse> 线 <line> 折线 <polyline> 多边形 <polygon> 路径 <path> 其中，path可以绘制任意图形 2. svg描边动画原理 svg的描边动画就是利用stroke-dasharray和stroke-dashoffset两个属性值的变化来实现的。 2.1 stroke-dasharray用来画虚线 stroke-dasharray: 实线长度虚线长度，可以设置多个值，奇数自动重复一遍补成偶数，即 stroke-dasharray: 10 等价于 stroke-dasharray: 10 10 2.2 stroke-dashoffset用来控制虚线的偏移 2.3 描边动画原理当stroke-dasharray和stroke-dashoffset都足够大，大于线条的长度，则stroke-dashoffset从固定值变化到0的过程，线条就会从无到伸展到其长度。如果svg线条为path，则可以实现任意复杂图形的描边动画。 2.4 下面是几个例子 2.4.1 鼠标hover画直线 <svg> 　　<line id="line" x1="30" y1="30" x2="300" y2="30" stroke-width="20" stroke="red" stroke

CSS3实现文字描边的2种方法

阅读更多关于 CSS3实现文字描边的2种方法

　　问题　　　　最近遇到一个需求，需要实现文字的描边效果，如下图　　　解决方法一　　　　首先想到去看 CSS3 有没有什么属性可以实现，后来被我找到了 text-stroke 　　　该属性是一个复合属性，可以设置文字宽度和文字描边颜色　　　该属性使用很简单： text-stroke:1px #f00; （ 1px 是文字宽度， #ff 是文字描边颜色）　　　　本以为该属性的兼容性会及时止住我微微上扬的嘴角，随后逐渐凝固　　　　但出乎意料的是大多浏览器已经开始支持该属性，只需要加上前缀 -webkit- 即可　　 Demo <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>text-stroke-文字描边</title> <style> .demo { color: mistyrose; text-align: center; font-family: Verdana; font-size: 30px; font-weight: bold; } .stroke { -webkit-text-stroke: 1px greenyellow; } </style> </head> <body> <div class="demo"> <p>没有添加描边</p> <p class=