背景图，边框渐变等样式设置

最新推荐文章于 2023-10-24 22:56:23 发布

原创最新推荐文章于 2023-10-24 22:56:23 发布 · 664 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css3 #前端

前端开发同时被 2 个专栏收录

25 篇文章

订阅专栏

css

3 篇文章

订阅专栏

本文主要介绍了CSS中实现元素居中、背景图设置及边框渐变效果的方法。包括使用margin和transform属性实现居中，background属性配置背景图，以及border和border-image属性创建边框渐变。

今天来讲讲样式的问题：

一、居中

每次遇到居中的问题就会异常头疼；今天总结下

使用margin：auto；但是它的限制很多；很多地方使用margin其实是无法生效的；

不过在宽高很明确的时候，可以像下面的用法

position: absolute; 
 top: 50%; 
 left:50%;
margin:-(height/2) 0 0 -(width/2)

使用transform：限制要比margin宽松很多；

position: absolute; 
 top: 50%; 
 left:50%;
 transform: translate(-50%,-50%); // 下面两个的集合
 transform: translateY(-50%);  // 垂直居中
 transform: translateX(-50%);  // 水平居中

二：背景图

background-image: url("url");
  background-size: 100% 100%;
  background-repeat: no-repeat;

背景使用img标签进行加载是，只用设置position和宽高就可；

三、边框渐变


border: 1.5px dashed #cdcdcd85;  
// 只写一个right，就只会生效有边框；上面都有的话，会按着位置信息加载
border-right: 1.5px dashed #cdcdcd85; 


border-image: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, 
rgba(255, 255, 255, 0.98) 50%, 
rgba(255, 255, 255, 0)) 
0 14 0 0; -- 上右下左的边框位置信息

或者使用图片路径

border-image: url(button.png) 0 14 0 14 stretch;


针对不同浏览器
-moz-border-image: url(button.png) 0 14 0 14 stretch; /* Old Firefox */
-webkit-border-image: url(button.png) 0 14 0 14 stretch; /* Safari */
-o-border-image: url(button.png) 0 14 0 14 stretch; /* Opera */