धीरे-धीरे सीमाएँ

Question

मैं एक सीमा पर एक ढाल लागू करने की कोशिश कर रहा हूं, मैंने सोचा कि यह ऐसा करना जितना आसान था:

border-color: -moz-linear-gradient(top, #555555, #111111);

लेकिन यह काम नहीं करता है।

क्या किसी को पता है कि बॉर्डर ग्रेडिएंट्स करने का सही तरीका क्या है?

Answer 1

अब WebKit (और Chrome 12 कम से कम) ग्रेडिएंट को बॉर्डर इमेज के रूप में सपोर्ट करता है:

-webkit-border-image: -webkit-gradient(linear, left top, left bottom, from(#00abeb), to(#fff), color-stop(0.5, #fff), color-stop(0.5, #66cc00)) 21 30 30 21 repeat repeat;

प्रूफलिंक - http://www.webkit.org/blog/1424/css3-gradients/
ब्राउज़र समर्थन: http://caniuse.com/#search=border-image

Comments

उस लिंक में सीमा-छवि का उल्लेख नहीं है ...: /

— aaidan

सीमा-त्रिज्या का उपयोग करते समय किसी भी ब्राउज़र में काम नहीं करता है! जाहिरा तौर पर सीमा-छवि संपत्ति हमेशा वर्ग सीमाओं का निर्माण करती है, भले ही सीमा-त्रिज्या चालू हो। तो नेस्टेड तत्वों (या: a से पहले तत्व) का विकल्प सबसे लचीला समाधान है। यहाँ एक JSField thats सबसे आसान तरीका दिखाता है यह किया जा सकता है: jsfiddle.net/wschwarz/e2ckdp2v

— वाल्टर श्वार्ज़

Answer 2

सीमाओं के बजाय, मैं पृष्ठभूमि ग्रेडर और पैडिंग का उपयोग करूंगा। वही देखो, लेकिन बहुत आसान, अधिक समर्थित।

एक सरल उदाहरण:

.g {
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.33, rgb(14,173,173)), color-stop(0.67, rgb(0,255,255)));
background-image: -moz-linear-gradient(center bottom, rgb(14,173,173) 33%, rgb(0,255,255) 67% );
padding: 2px;
}

.g > div { background: #fff; }

<div class="g">
	<div>bla</div>
</div>

---

संपादित करें: आप :beforeचयनकर्ता का भी लाभ उठा सकते हैं क्योंकि @WalterSchwarz ने बताया:

body {
    padding: 20px;
}
.circle {
    width: 100%;
    height: 200px;
    background: linear-gradient(to top, #3acfd5 0%, #3a4ed5 100%);
    border-radius: 100%;
    position: relative;
    text-align: center;
    padding: 20px;
    box-sizing: border-box;
}
.circle::before {
    border-radius: 100%;
    content: '';
    background-image: linear-gradient(to bottom, #3acfd5 0%, #3a4ed5 100%);
    padding: 10px;
    width: 100%;
    height:100%;
    top: -10px;
    left: -10px;
    position:absolute;
    z-index:-1;
}

<div class="circle">Test</div>

Comments

ए का उपयोग करना: पहले तत्व बेहतर है, क्योंकि आपके पास फिर सीएसएस के माध्यम से पूर्ण नियंत्रण है और एचटीएमएल मार्कअप साफ रहता है। यहाँ एक JSFiddle है जो सबसे आसान तरीका दिखाती है यह किया जा सकता है: jsfiddle.net/wschwarz/e2ckdp2v

— Walter Schwarz

कृपया ध्यान दें कि "बहुत अधिक समर्थित" का अर्थ IE10 के लिए समर्थन सहित होगा। देखें CanIUse सीमा छवि बनाम CanIUse ढाल ।

— अगस्त

Answer 3

border-image-slice एक सीएसएस सीमा-छवि ढाल का विस्तार करेगा

यह (जैसा कि मैं इसे समझता हूं) वर्गों में "छवि" के डिफ़ॉल्ट स्लाइसिंग को रोकता है - इसके बिना, कुछ भी नहीं दिखाई देता है यदि सीमा केवल एक तरफ है, और यदि यह पूरे तत्व के आसपास है तो प्रत्येक कोने में चार छोटे ग्रेडिएंट दिखाई देते हैं।

  border-bottom: 6px solid transparent;
  border-image: linear-gradient(to right, red , yellow);
  border-image-slice: 1;

Comments

क्रोम में, अगर इसके साथ जोड़ border-radiusदिया जाता है, तो सीमा-त्रिज्या को नजरअंदाज कर दिया जाता है :(

— बेन

Answer 4

मोज़िला वर्तमान में केवल सीएसएस ग्रेडिएंट्स को पृष्ठभूमि-छवि संपत्ति के मूल्यों के साथ-साथ आशुलिपि पृष्ठभूमि के भीतर का समर्थन करता है।

- https://developer.mozilla.org/en/CSS/-moz-linear-gradient

Example 3 - Gradient Borders

border: 8px solid #000;
-moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-left-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-right-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
padding: 5px 5px 5px 15px; 

- http://www.cssportal.com/css3-preview/borders.htm

Answer 5

यह कोशिश करो, वेब-किट पर ठीक काम करता है

.border { 
    width: 400px;
    padding: 20px;
    border-top: 10px solid #FFFF00;
    border-bottom:10px solid #FF0000;
    background-image: 
        linear-gradient(#FFFF00, #FF0000),
        linear-gradient(#FFFF00, #FF0000)
    ;
    background-size:10px 100%;
    background-position:0 0, 100% 0;
    background-repeat:no-repeat;
}

<div class="border">Hello!</div>

Comments

सबसे ऊपर और नीचे से ठोस रंग क्यों हैं?

— जॉन ktejik

Answer 6

यह एक हैक है, लेकिन आप ढाल को निर्दिष्ट करने के लिए पृष्ठभूमि-छवि का उपयोग करके और फिर वास्तविक पृष्ठभूमि को बॉक्स-छाया के साथ मास्क करके कुछ मामलों में इस प्रभाव को प्राप्त कर सकते हैं। उदाहरण के लिए:

p {
  display: inline-block;
  width: 50px;
  height: 50px;
  /* The background is used to specify the border background */
  background: -moz-linear-gradient(45deg, #f00, #ff0);
  background: -webkit-linear-gradient(45deg, #f00, #ff0);
  /* Background origin is the padding box by default.
  Override to make the background cover the border as well. */
  -moz-background-origin: border;
  background-origin: border-box;
  /* A transparent border determines the width */
  border: 4px solid transparent;
  border-radius: 8px;
  box-shadow:
    inset 0 0 12px #0cc, /* Inset shadow */
    0 0 12px #0cc, /* Outset shadow */
    inset -999px 0 0 #fff; /* The background color */
}

प्रेषक: http://blog.nateps.com/the-elusive-css-border-gradient

Answer 7

यह कोशिश करो, यह मेरे लिए काम किया।

div{
  border-radius: 20px;
  height: 70vh;
  overflow: hidden;
}

div::before{
  content: '';
  display: block;
  box-sizing: border-box;
  height: 100%;

  border: 1em solid transparent;
  border-image: linear-gradient(to top, red 0%, blue 100%);
  border-image-slice: 1;
}

<div></div>

लिंक फिडल https://jsfiddle.net/yash009/kayjqve3/1/ पर है, इससे आपको मदद मिलेगी

Answer 8

मैं sajajmon से सहमत हूँ। उनके और क्वेंटिन के उत्तर के साथ एकमात्र समस्या क्रॉस-ब्राउज़र संगतता है।

HTML:

<div class="g">
    <div>bla</div>
</div>

सीएसएस:

.g {
background-image: -webkit-linear-gradient(300deg, white, black, white); /* webkit browsers (Chrome & Safari) */
background-image: -moz-linear-gradient(300deg, white, black, white); /* Mozilla browsers (Firefox) */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#000000', gradientType='1'); /* Internet Explorer */
background-image: -o-linear-gradient(300deg,rgb(255,255,255),rgb(0,0,0) 50%,rgb(255,255,255) 100%); /* Opera */
}

.g > div { background: #fff; }

Comments

कृपया, filterऐसी मामूली चीज़ के लिए IE का समर्थन करने के लिए नहीं , बस एक ठोस सीमा का उपयोग करें।

— रिकार्डो ज़िया

@ रिकार्डो - देखभाल करने के लिए क्यों समझा?

— Alohci

@ आलसी, निश्चित, बहुत सारे कारण। ध्यान दें कि मेरी व्याख्या आपके लिए नहीं है क्योंकि आपकी प्रतिष्ठा वाला कोई व्यक्ति पहले से ही इन चीजों को जानता है, यह दूसरों के लिए है जो या तो यह नहीं जानते हैं और / या सीख रहे हैं: 1. यह ग्रेसफुल डिग्रेडेशन का उपयोग करने के लिए अधिक स्मार्ट है । 2. हम वेब डिजाइनर / डेवलपर्स के रूप में उपयोगकर्ताओं के लिए वेबसाइटों के निर्माण के बारे में सोचना चाहिए, न कि ब्राउज़रों के लिए। और सिर्फ 3 बिंदुओं पर इसे छोड़ने के लिए, 3. सिर्फ इसलिए कि आप 'ऐसा कर सकते हैं इसका मतलब यह नहीं है कि आपको यह करना चाहिए'। इनलाइन स्टाइल और अपरिहार्य के साथ भी !important। अब, Alohci, आपकी बारी यह समझाती है कि क्यों :)

— रिकार्डो Zea

और फिर यह टिप्पणी और यह एक यह सब योग। मुझे यकीन है कि वहाँ और अधिक उल्लास है।

— रिकार्डो ज़िया

Answer 9

वेबकिट सीमाओं में ग्रेडिएंट का समर्थन करता है , और अब मोज़िला प्रारूप में ग्रेडिएंट को स्वीकार करता है।

फ़ायरफ़ॉक्स दो तरह से ग्रेडिएंट का समर्थन करने का दावा करता है:

1. सीमा-छवि-स्रोत के साथ सीमा-छवि का उपयोग करना
2. सीमा-दाएं-रंगों का उपयोग करना (दाएं / बाएं / ऊपर / नीचे)

IE9 का कोई समर्थन नहीं है।

Answer 10

नीचे दिए गए उदाहरण का प्रयास करें:

.border-gradient {
      border-width: 5px 5px 5px 5px;
      border-image: linear-gradient(45deg, rgba(100,57,242,1) 0%, rgba(242,55,55,1) 100%);
      border-image-slice: 9;
      border-style: solid;
}

Answer 11

एक ही प्रभाव को प्राप्त करने के लिए एक और हैक कई पृष्ठभूमि छवियों का उपयोग करना है, एक ऐसी सुविधा जो IE9 +, newish फ़ायरफ़ॉक्स और अधिकांश WebKit- आधारित ब्राउज़र में समर्थित है: http://caniuse.com/#feat=multibackgrounds

IE6-8 में कई पृष्ठभूमि का उपयोग करने के लिए कुछ विकल्प भी हैं: http://www.beyondhyper.com/css3-multiple-backgrounds-in-non-supportive-browsers/

उदाहरण के लिए, मान लें कि आप 5px चौड़ी बायीं सीमा चाहते हैं जो नीले से सफेद रंग में एक रैखिक ढाल है। एक छवि के रूप में ढाल बनाएं और एक पीएनजी को निर्यात करें। के बाद किसी भी अन्य सीएसएस पृष्ठभूमि की सूची बनाएंबाएं बॉर्डर ग्रेडिएंट के लिए एक के एक :

#डिब्बा {
    पृष्ठभूमि:
        url (/images/theBox-leftBorderGradient.png) ने कोई पुनरावृत्ति नहीं छोड़ी,
        ...;
}

आप इस तकनीक को backgroundशॉर्टहैंड प्रॉपर्टी के बैकग्राउंड पोजिशन पार्ट को बदलकर टॉप, राइट, और बॉटम बॉर्डर ग्रेडिएंट्स में ढाल सकते हैं।

यहाँ दिए गए उदाहरण के लिए एक jsFiddle है: http://jsfiddle.net/jLnDt/

Answer 12

Css- ट्रिक्स से ग्रेडिएंट बॉर्डर: http://css-tricks.com/examples/GradientBorder/

.multbg-top-to-bottom {
  border-top: 3px solid black;
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#000), to(transparent));
  background-image: -webkit-linear-gradient(#000, transparent);
  background-image:
      -moz-linear-gradient(#000, transparent),
      -moz-linear-gradient(#000, transparent);
  background-image:
      -o-linear-gradient(#000, transparent),
      -o-linear-gradient(#000, transparent);
  background-image: 
      linear-gradient(#000, transparent),
      linear-gradient(#000, transparent);
  -moz-background-size: 3px 100%;
  background-size: 3px 100%;
  background-position: 0 0, 100% 0;
  background-repeat: no-repeat; 
}

Answer 13

क्रॉस-ब्राउज़र समर्थन के लिए आप :beforeया तो :afterछद्म तत्वों के साथ एक ढाल सीमा की नकल कर सकते हैं, इस बात पर निर्भर करता है कि आप क्या करना चाहते हैं।

Answer 14

ग्रेडिएंट बॉर्डर के लिए उदाहरण

सीमा-छवि सीएसएस संपत्ति का उपयोग करना

श्रेय: मोज़िला में सीमा-छवि

.grad-border {
  height: 1px;
  width: 85%;
  margin: 0 auto;
  display: flex;
}
.left-border, .right-border {
  width: 50%;
  border-bottom: 2px solid #695f52;
  display: inline-block;
}
.left-border {
  border-image: linear-gradient(270deg, #b3b3b3, #fff) 1;
}
.right-border {
  border-image: linear-gradient(90deg, #b3b3b3, #fff) 1;
}

<div class="grad-border">
  <div class="left-border"></div>
  <div class="right-border"></div>
</div>

Answer 15

इस कोड को आज़माएं

.gradientBoxesWithOuterShadows { 
height: 200px;
width: 400px; 
padding: 20px;
background-color: white; 

/* outer shadows  (note the rgba is red, green, blue, alpha) */
-webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.4); 
-moz-box-shadow: 0px 1px 6px rgba(23, 69, 88, .5);

/* rounded corners */
-webkit-border-radius: 12px;
-moz-border-radius: 7px; 
border-radius: 7px;

/* gradients */
background: -webkit-gradient(linear, left top, left bottom, 
color-stop(0%, white), color-stop(15%, white), color-stop(100%, #D7E9F5)); 
background: -moz-linear-gradient(top, white 0%, white 55%, #D5E4F3 130%); 
}

या शायद इस फिडेल को देखें: http://jsfiddle.net/necolas/vqnk9/

Answer 16

यहाँ एक अच्छा अर्ध-क्रॉस-ब्राउज़र तरीका है, जिसमें ढाल सीमाएँ हैं जो आधे रास्ते से नीचे की ओर फीकी पड़ जाती हैं। बस रंग-बंद करने के लिए सेट करकेrgba(0, 0, 0, 0)

.fade-out-borders {
min-height: 200px; /* for example */

-webkit-border-image: -webkit-gradient(linear, 0 0, 0 50%, from(black), to(rgba(0, 0, 0, 0))) 1 100%;
-webkit-border-image: -webkit-linear-gradient(black, rgba(0, 0, 0, 0) 50%) 1 100%;
-moz-border-image: -moz-linear-gradient(black, rgba(0, 0, 0, 0) 50%) 1 100%;
-o-border-image: -o-linear-gradient(black, rgba(0, 0, 0, 0) 50%) 1 100%;
border-image: linear-gradient(to bottom, black, rgba(0, 0, 0, 0) 50%) 1 100%;
}

<div class="fade-out-border"></div>

उपयोग समझाया गया:

Formal grammar: linear-gradient(  [ <angle> | to <side-or-corner> ,]? <color-stop> [, <color-stop>]+ )
                              \---------------------------------/ \----------------------------/
                                Definition of the gradient line         List of color stops  

यहाँ और अधिक: https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient

Answer 17

इस बारे में एक अच्छा सीएसएस ट्रिक्स लेख है: https://css-tricks.com/gradient-borders-in-css/

मैं एक बहुत ही सरल, एकल तत्व, एकाधिक पृष्ठभूमि और पृष्ठभूमि-मूल संपत्ति का उपयोग करके इसका समाधान करने में सक्षम था।

.wrapper {
  background: linear-gradient(#222, #222), 
              linear-gradient(to right, red, purple);
  background-origin: padding-box, border-box;
  background-repeat: no-repeat; /* this is important */
  border: 5px solid transparent;
}

इस दृष्टिकोण के बारे में अच्छी बातें हैं:

1. यह z-index से प्रभावित नहीं है
2. यह सिर्फ पारदर्शी सीमा की चौड़ाई को बदलकर आसानी से माप सकता है

इसे देखें : https://codepen.io/AlexOverbeck/pen/axGQyv?editors=1100