উত্তর:
ওয়েবকিট এখন (এবং কমপক্ষে 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
সীমানার পরিবর্তে, আমি ব্যাকগ্রাউন্ড গ্রেডিয়েন্ট এবং প্যাডিং ব্যবহার করব। একই চেহারা, কিন্তু অনেক সহজ, আরও সমর্থিত।
একটি সাধারণ উদাহরণ:
.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@ ওয়াল্টারশওয়ার্জ নির্দেশিত হিসাবে নির্বাচককেও উত্তোলন করতে পারেন :
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>border-image-slice একটি CSS সীমানা-চিত্র গ্রেডিয়েন্ট প্রসারিত করবেএটি (যেমন আমি এটি বুঝতে পারি) বিভাগে "চিত্র" এর ডিফল্ট টুকরো টুকরা রোধ করে - এটি ব্যতীত সীমান্তটি কেবল একদিকে থাকলে এবং সমস্ত উপাদানটির চারপাশে প্রতিটি কোণে চারটি ক্ষুদ্র গ্রেডিয়েন্ট প্রদর্শিত হয় nothing
border-bottom: 6px solid transparent;
border-image: linear-gradient(to right, red , yellow);
border-image-slice: 1;
border-radius, সীমানা ব্যাসার্ধ উপেক্ষা করা হবে :(
মজিলা বর্তমানে কেবল সিএসএস গ্রেডিয়েন্টকে ব্যাকগ্রাউন্ড-ইমেজ বৈশিষ্ট্যের মান হিসাবে পাশাপাশি শর্টহ্যান্ড ব্যাকগ্রাউন্ডের মধ্যে সমর্থন করে।
- 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;
এটি চেষ্টা করুন, ওয়েব-কিটে দুর্দান্ত কাজ করে
.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>এটি একটি হ্যাক, তবে আপনি কিছু ক্ষেত্রে গ্রেডিয়েন্ট নির্দিষ্ট করতে ব্যাকগ্রাউন্ড-চিত্র ব্যবহার করে এবং তারপরে বাক্স-ছায়া সহ প্রকৃত ব্যাকগ্রাউন্ডটি মাস্ক করে এই প্রভাব অর্জন করতে পারেন। উদাহরণ স্বরূপ:
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 ient
এটি চেষ্টা করুন, এটি আমার জন্য কাজ করেছে।
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/ আশা করি এটি সাহায্য করবে
আমি szajmon সাথে একমত। তাঁর এবং কুইন্টিনের উত্তরগুলির সাথে একমাত্র সমস্যা হ'ল ক্রস ব্রাউজারের সামঞ্জস্য।
এইচটিএমএল:
<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; }filterজাতীয় গৌণিক জিনিসের জন্য আইই সমর্থন করার দরকার নেই , কেবল একটি শক্ত সীমানা ব্যবহার করুন।
!important। এখন, আলোচি, আপনার পালাও কেন তাও ব্যাখ্যা করছে :)
ওয়েবকিট সীমান্তে গ্রেডিয়েন্টকে সমর্থন করে এবং এখন মোজিলা ফর্ম্যাটে গ্রেডিয়েন্ট গ্রহণ করে।
ফায়ারফক্স দুটি ধরণের গ্রেডিয়েন্টকে সমর্থন করার দাবি করেছে:
আইই 9 এর কোনও সমর্থন নেই।
নীচের উদাহরণটি ব্যবহার করে দেখুন:
.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;
}একই প্রভাব অর্জনের জন্য আরেকটি হ্যাক হ'ল একাধিক ব্যাকগ্রাউন্ড চিত্র ব্যবহার করা, একটি বৈশিষ্ট্য যা আইই 9+, নতুন ফায়ারফক্স এবং বেশিরভাগ ওয়েবকিট-ভিত্তিক ব্রাউজারগুলিতে সমর্থিত: http://caniuse.com/#feat=m ਮਲਟੀব্যাকগ্রাউন্ডস
আইআই --৮-তে একাধিক ব্যাকগ্রাউন্ড ব্যবহারের জন্য কিছু বিকল্প রয়েছে: http://www.beyondhyper.com/css3-m Multiple-backgrounds-in-non-supportive-b ব্রাউজার /
উদাহরণস্বরূপ, ধরুন আপনি একটি 5px-প্রশস্ত বাম সীমানা চান যা নীল থেকে সাদা থেকে রৈখিক গ্রেডিয়েন্ট। চিত্র হিসাবে গ্রেডিয়েন্ট তৈরি করুন এবং একটি পিএনজিতে রফতানি করুন। বাম সীমানা গ্রেডিয়েন্টের জন্য একের পর অন্য যে কোনও সিএসএস ব্যাকগ্রাউন্ড তালিকাবদ্ধ করুন:
#বক্স {
পটভূমি:
url (/images/theBox-leftBorderGradient.png) কোন পুনরাবৃত্তি ছাড়েনি,
...;
}
আপনি এই কৌশলটি backgroundশর্টহ্যান্ড সম্পত্তির পটভূমি অবস্থানের অংশটি পরিবর্তন করে শীর্ষ, ডান এবং নীচের সীমানা গ্রেডিয়েন্টগুলিতে অভিযোজিত করতে পারেন ।
প্রদত্ত উদাহরণের জন্য এখানে একটি জেএসফিডাল দেওয়া হয়েছে: http://jsfiddle.net/jLnDt/
সিএসএস-ট্রিকস থেকে গ্রেডিয়েন্ট বর্ডার: http://css-tricks.com/example/ গ্রেডিয়েন্টবোর্ডার /
.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;
}গ্রেডিয়েন্ট বর্ডারের উদাহরণ
সীমানা-চিত্র সিএসএস সম্পত্তি ব্যবহার করে
ক্রেডিটগুলিতে: মজিলায় সীমানা-চিত্র
.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>এই কোড চেষ্টা করুন
.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/
গ্রেডিয়েন্ট বর্ডারগুলি অর্ধেক নিচে ফিকে হয়ে যাওয়ার জন্য এখানে একটি দুর্দান্ত আধা ক্রস ব্রাউজারের উপায়। কেবলমাত্র সেটিং দ্বারা রঙ-স্টপ থেকে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
এটি সম্পর্কে একটি দুর্দান্ত CSS ট্রিকস নিবন্ধ রয়েছে: 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;
}এই পদ্ধতির সম্পর্কে সুন্দর জিনিস হ'ল:
এটি দেখুন: https://codepen.io/AlexOverbeck/pen/axGQyv?editors=1100