css3之新ui方案

TheWinds      2022-02-07     234

关键词:

border-radius 圆角

参数可为像素 也可为百分比
当一个参数时 作用范围为四个角
当两个参数时 作用范围为 左上右下 右上左下
当三个参数时 作用范围为 左上 右上左下 右下
当四个参数时 作用范围为 左上 右上 右下 左下
当参数中有‘/‘时 例如 100px/150px 则表示:X轴半径/Y轴半径

-border-image 边框背景

-border-image:图片链接 图片切割上下 图片切割左右 边框排列方式 ; 
border-image-repeat:;边框排列方式
                    round 平铺 与repeat效果一样
                    repeat 重复
                    stretch 拉伸 默认
在-webkit-中会自动补上中间部分 

-moz-border-left-colors: 边框多色彩处理

例:-moz-border-left-colors:red blue yellow red blue yellow red blue yellow;

注:目前只在火狐中起效果

-webkit-repeating-linear-gradient  平铺渐变

-linear-gradient:  线性渐变

IE9及9以下不支持线性渐变

通过滤镜处理:
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=‘red‘,endColorstr=‘blue‘,GradientType=‘0‘);
可兼容到IE6
startColorstr 开始颜色
endColorstr 结束颜色
GradientType 1为从left->right 0为从top->bottom

-radial-gradient:方向,关键字(可选),颜色;

径向渐变关键字

closest-size 向最近端渐变
closest-corner 向最近角渐变
farthest-corner 向最远角渐变
contain 包含(元素将其包含 使其渐变不会超出元素周围)
cover 覆盖(渐变将整个元素铺满)

background-size:背景尺寸

background-size:contain 包含(缩小) 元素包含背景图(背景图刚好放进盒子里)
cover 覆盖(放大) 背景图等比放大后将元素填满

background-origin:背景图原点设置

background-origin:border-box; 从边框开始计算
                           content-box 从内容开始计算
                           padding-box 从内补白开始计算(默认)
background-clip: 背景裁剪

background-clip:border-box; 默认
解决背景半透明边框显示背景图片的问题:
                       padding-box 切除padding以外的背景
                       content-box 切除content以外的背景
                       -webkit-background-clip:text; 切除文字以外的背景(目前火狐不适用)

 




























css3一些新的ui方案

文本新增属性一、文字阴影用法:text-shadow:h-shadowv-shadowblurcolor;可以一次设置多层阴影,用逗号分开,如下, text-shadow:-5px-10px-5pxmediumpurple,5px10px5pxpink;二、文字描边用法:-webkit-text-stroke:px值color;-webkit-text-stroke:4pxpink;此属性还未... 查看详情

unigui之新窗口(19)(代码片段)

      然后保存,在这里重命名窗口    NewForm2.UniForm1.Show();//非阻塞//NewForm2.UniForm1.ShowModal();//阻塞  查看详情

排序工作量之新任务(shoi2001)

排序工作量之新任务(SHOI2001)给出两个整数n和t,求n的全排列中逆序对数为t的个数,和逆序对数为t的字典序最小全排列。首先第一个问题可以用dp解决,\(f[i][j]\)表示前i个数,j个逆序对的序列数,那么\(f[i][j]=f[i-1][j-k]\(k<i)(k... 查看详情

ecmascript6入门之新的数据类型symbol

1、Symbol,一个每次创建都不一样的值SymbolundefinednullBooleanStringNumberObjectletc=Symbol("这是一个Symbol");leta=Symbol();letb=Symbol();console.log("a:",a);console.log("b:",b);console.log("c:",c);console.log(a===b);le 查看详情

单例模式之新的想法

前几天被问到了单例模式对构造函数有什么要求吗?答曰:没什么要求吧?回来查了下详细的资料才发现,原来单例模式的实现private的一个构造函数,目的是不让这个单例的类可以new一个对象出来。思考了下,事实上不加应该... 查看详情

共码未来|以科技之新见人文之美

科技创新推动社会发展也让人们的生活更便利、更多彩感受有温度的技术解锁不一样的旅程让我们一起了解谷歌艺术与文化、Google教育合作所带来的人文之美为让更多艺术瑰宝焕发新生,让更多人有机会接触文化与艺术的魅... 查看详情

共码未来|以科技之新见人文之美

科技创新推动社会发展也让人们的生活更便利、更多彩感受有温度的技术解锁不一样的旅程让我们一起了解谷歌艺术与文化、Google教育合作所带来的人文之美为让更多艺术瑰宝焕发新生,让更多人有机会接触文化与艺术的魅... 查看详情

es6系列_2之新的声明方式(代码片段)

在ES5中我们在声明时只有一种方法,就是使用var来进行声明,ES6对声明的进行了扩展,现在可以有三种声明方式。   (1)var:它是variable的简写,可以理解成变量的意思。(2)let:它在英文中是“让”的意思,也可... 查看详情

正则限制输入为数字,且最多输入2位小数之新写法(代码片段)

  原本小程序需要一个限制文本框输入为数字,且最多保留2位小数的效果,网上找到的例子感觉有点繁琐,就自己写了一个。代码很简单,主要借助了正则的组匹配特性进行处理://检查输入文本,限制只能为数字并且数字最... 查看详情

es6之新的数据结构(代码片段)

SetSet类似于数组,是一种集合的数据结构,和Array之间最大的区别是:Set中所有的成员都是唯一的。可以把Set想象成是一个:既没有重复元素,也没有顺序概念的数组。Set本身是一个构造函数,用来生成Set数据结构consts1=newSet();s1.add... 查看详情

css3文字渐变无效果的解决方案

现在css3越来月流行了,为了实现一些高大上的效果,我们会用一些渐变的特效,请看文字渐变的特效代码:.title{font-size:60px;line-height:80px;text-align:center;margin-top:15%;-webkit-background-clip:text;background:linear-gradient(toright,red,blue);colo 查看详情

css3动画卡顿性能优化解决方案--摘抄

最近在开发小程序,与vue类似,它们都有生命周期这回事。onLoad监听页面加载onReady监听页面初次渲染完成onShow监听页面显示到底是什么意思?所以这又触碰到了我的知识盲区,不过项目在磕磕绊绊中完成的差不多了,但是遇到... 查看详情

css3前缀自动补全方案和插件

第一种方法:prefixfree,js插件,大小2kb,直接导入,无需任何浏览器兼容前缀<scriptsrc="prefixfree.min.js"></script>该js在微盘下载即可第二种方法:应用编辑器,运用各个编辑器的自动完成(目前我定义了editplus和sublimetext的自动... 查看详情

ui录制默认的录制方案是

参考技术Aui录制默认的录制方案具体如下:1、找到录制的文件。2、打开ui程序。3、打开文件并运行程序。4、将文件添加到文件夹。5、保存,此时现在已经完成了ui录制默认操作。 查看详情

css3学习手记伪类选择器

 伪类选择器动态伪类UI元素状态伪类CSS3结构类否定选择器伪元素 动态伪类这些伪类并不存在于HTM中,只有当用户和网站交互的时候才能体现出来锚点伪类:link :visited用户行为伪类:hover:active:focus(获取鼠标焦点) U... 查看详情

jdk8新特性之新的日期&时间api,一篇讲清楚!(代码片段)

本系列为:从零开始学Java,为千锋教育资深Java教学老师独家创作致力于为大家讲解清晰Java相关知识点,含有丰富的代码案例及讲解。如果感觉对大家有帮助的话,可以【点个关注】持续追更~技术类问题,也欢迎大家和我们沟... 查看详情

androidframework开发之新加一个app源码到packages/apps编译android.mk配置(代码片段)

hi,粉丝朋友们大家好!近来有朋友反馈在看我的androidframework实战开发合集课程时候(https://download.csdn.net/combo/detail/2202)需要购买可以参考直接找千里马最优惠:https://blog.csdn.net/learnframework/article/details/12408688... 查看详情

远程配置替代方案:存储 UI 特定参数

】远程配置替代方案:存储UI特定参数【英文标题】:RemoteConfigAlternative:StoreUIspecificparameters【发布时间】:2021-12-2716:43:54【问题描述】:我想在不发布的情况下更改ios和android应用程序的UI。例如显示/隐藏图片、显示位置等我们... 查看详情